一、

二、调优例子

 <!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. SQLServer数据库表中将指定列分组转一行

    不说明,直接看代码: --1. 创建表,添加测试数据 CREATE TABLE #test(code varchar(50), [values] varchar(10)) INSERT #test S ...

  2. Vim一些实用的用法

    打开多个文件: 1.vim还没有启动的时候:在终端里输入 vim file1 file2 ... filen便可以打开所有想要打开的文件2.vim已经启动输入:open file可以再打开一个文件,并 ...

  3. Windows 下 Composer 与 Laravel 4 的安装

    1.安装Composer Composer是PHP的依附经管对象之一,官方网站 http://getcomposer.org/ .它支撑多种安装体式格式,对于在win下做开辟的草来说,最便捷的体式格式 ...

  4. JavaScript中使用console调试程序的坑

    上DEMO a = {key1: [1, 2], 'key2': {'key4': '11'}, 'key3': [1, 2]} console.info(1,a) a.key2.key4 = '22 ...

  5. WIN7右下角的声音图标不见了

    有时候电脑启动了,但是声音图标却不见了,造成调试声音相当的麻烦,那么怎么来处理呢? 一:ctrl+shit+Esc键打开任务管理器 二:找到exeplore.exe,结束进程. 三:重新建立进程 上述 ...

  6. SQLserver通过链接服务器连接oracle

    在SQLserver中一直使用的是DTS抽取数据,但是DTS微软只支持到2008,到了2012后就没有这个工具了,现在需要在SQLserver跟Oracle中间建立一个通道,借助这个通道,将Oracl ...

  7. MySQL 5.7.9的多源复制

    什么是多源复制? 首先,我们需要清楚 multi-master 与multi-source 复制不是一样的. Multi-Master 复制通常是环形复制,你可以在任意主机上将数据复制给其他主机. M ...

  8. 【转载】IE6 PNG透明终极解决方案（打造W3Cfuns-IE6PNG最强帖）

    原文地址:http://www.w3cfuns.com/thread-297-1-1.html 本文版权归W3Cfuns.com所有,转载需在文章页面明显位置以链接的方式给出原文链接,否则W3Cfun ...

  9. Configure xterm Fonts and Colors for Your Eyeball

    https://wiki.mpich.org/mpich/index.php/Configure_xterm_Fonts_and_Colors_for_Your_Eyeball Screenshot ...

  10. NodeJS -Express 4.0 用include取代partial

    在Express 4.0 下按如下方法设置: (1)运行cmd 输入:npm install express-partials -g (2)下载成功后.在app.js 中引用此插件   var par ...