一、

二、调优例子

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>React性能调优</title>

 </head>

 <body>

     <script src="./react-0.13.2/build/react-with-addons.js"></script>

     <script src="./react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var NumberDiv = React.createClass({

             getInitialState: function () {

                 return {

                     number: this.props.number,

                 }

             },

             shouldComponentUpdate: function (nextProps) {

                 return nextProps.render

             },

             render: function () {

                 var style = {

                     height: "100px",

                     width: "100px",

                     float: "left",

                     margin: "10px",

                     backgroundColor: "gray",

                 }

                 var chosedStyle = {

                     height: "100px",

                     width: "100px",

                     float: "left",

                     margin: "10px",

                     backgroundColor: "red",

                 }

                 return <div style={this.props.chosedNumber === this.state.number ? chosedStyle : style}>

                     {this.state.number}

                 </div>

             }

         })

         var ChooseNumber = React.createClass({

             getInitialState: function () {

                 return {

                     inputNumber: -1,

                     lastNumber: -1

                 }

             },

             handleChange: function (e) {

                 if (parseInt(e.target.value) !== this.state.inputNumber) {

                     this.setState({

                         inputNumber: parseInt(e.target.value),

                         lastNumber: this.state.inputNumber

                     })

                 }

             },

             render: function () {

                 var inputStyle = {

                     display: "block",

                     clear: "both",

                     width: "200px",

                     marginBottom: "10px",

                 }

                 var children = []

                 for (var i = 0; i < 5000; i++) {

                     children.push(<NumberDiv key={i} render={i == this.state.inputNumber || i == this.state.lastNumber} chosedNumber={this.state.inputNumber} number={i}></NumberDiv>)

                 }

                 return <div>

                     <input type="text" style={inputStyle} placeholder="请输入一个数字" onChange={this.handleChange} />

                     {children}

                 </div>;

             }

         });

         React.render(<ChooseNumber></ChooseNumber>, document.body);

     </script>

 </body>

 </html>

三、运行结果

React如何性能调优的更多相关文章

  1. React组件性能调优

    React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...

  2. React 性能调优总结

    React 性能调优总结 首先要说一个库: why-did-you-update, 地址:why-did-you-update, 利用这个库可以在页面上快速看到多余渲染的问题: 因为多数情况下我们在R ...

  3. 小程序组件化框架 WePY 在性能调优上做出的探究

    作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...

  4. web前端性能调优

    最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...

  5. ［网站性能2］Asp.net平台下网站性能调优的实战方案

    文章来源:http://www.cnblogs.com/dingjie08/archive/2009/11/10/1599929.html 前言    最近帮朋友运营的平台进行了性能调优,效果还不错, ...

  6. Asp.net平台下网站性能调优的实战方案（转）

    转载地址:http://www.cnblogs.com/chenkai/archive/2009/11/07/1597795.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错,所以写出来 ...

  7. 第0/24周 SQL Server 性能调优培训引言

    大家好,这是我在博客园写的第一篇博文,之所以要开这个博客,是我对MS SQL技术学习的一个兴趣记录. 作为计算机专业毕业的人,自己对技术的掌握总是觉得很肤浅,博而不专,到现在我才发现自己的兴趣所在,于 ...

  8. sqlserver性能调优第一步

    相信不少的朋友,无论是做开发.架构的,还是DBA等,都经常听说“调优”这个词.说起“调优”,可能会让很多技术人员心头激情澎湃,也可能会让很多人感觉苦恼,不知道如何入手.当然,也有很多人对此不屑一顾,因 ...

  9. JavaScript：内存泄露、性能调优

    1.在进行JS内存泄露检查之前,先要了解JS的内存管理: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Manageme ...

随机推荐

  1. 利用dropbox备份vps数据

    在VPS的数据最好定时备份,免得服务器出了什么问题,数据就全丢了.我使用dropbox定时同步wordpress文件夹和数据库信息. 首先下载dropbox ? 1 wget -O dropbox.t ...

  2. hibernate 知识梳理

    一.hibernate背景介绍: 作者: Gavin King 分hibernate ORM(for relation db),OGM(for nosql db),hearch,validator,t ...

  3. Translation002—Package Index(Android包索引)

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 看本翻译前请您注意: 本人初学android,可能有的翻译不是非常准确,但本人尽最大努力,不清楚处会做标记,并附 ...

  4. easyui获取一行数据和修改data-options的值

    <table id="tab" class="easyui-datagrid" style="width: 100%; height: 500p ...

  5. selenium+python find_element_by_css_selector方法使用

    1.通过类class获取 比如如下代码 <h1 class="important"> This heading is very important. </h1&g ...

  6. swap分区添加

    首先你需要使用命令:dd 来创建一个swapfile,然后你需要使用mkswap命令在设备或者文件中创建一个Linux swap分区a) 使用root用户登陆b) 使用下面的命令创建一个2G的 Swa ...

  7. Windows Media Player安装了却不能播放网页上的视频

    前段时间遇到Windows Media Player安装了却不能播放网页上的视频的问题,在网上查找资料时,发现大部分资料都没能解决我这个问题.偶尔试了网上一牛人的方法,后来竟然解决了.现在再找那个网页 ...

  8. 历时一周，unity3d+xtion打造我的第一个休闲体感小游戏《空降奇兵》

    1.游戏介绍 本游戏属于休闲小游戏,主要操作如下: 菜单控制:举起左手或右手,点击左边或者右边的菜单:挥动左手或右手,选择关卡: 操作方式:玩家跳跃,游戏中的伞兵从飞机开始降落:玩家通过控制伞兵的左右 ...

  9. Makedown常用符号整理

    整理自:http://www.jianshu.com/p/1e402922ee32 不过这里发现博客园的makedown语法支持还不完善,代码语法显示挺有问题的,比较遗憾. 标题 # 一级标题## 二 ...

  10. FZU 2016 summer train I. Approximating a Constant Range 单调队列

    题目链接: 题目 I. Approximating a Constant Range time limit per test:2 seconds memory limit per test:256 m ...