一、

二、调优例子

 <!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. 常用ASCII 码对照表

    目前计算机中用得最广泛的字符集及其编码,是由美国国家标准局(ANSI)制定的ASCII码(American Standard Code for Information Interchange,美国标准 ...

  2. WCF + EF 遇到的问题

    此文承接上一文章 基于WCF的API实现 http://www.cnblogs.com/heyixiaoran/p/4000695.html 由于上一次Entity部分没怎么写,到Services里识 ...

  3. (转) java 复制文件，不使用输出流复制，高效率，文件通道的方式复制文件

    public static void fileChannelCopy(File s, File t) { FileInputStream fi = null; FileOutputStream fo ...

  4. office365 development

    Introduction to Office 365 Development http://www.microsoftvirtualacademy.com/training-courses/intro ...

  5. 使用Lucene.net提升网站搜索速度整合记录

    1.随着网站数据量达到500万条的时候,发现SQL数据库如果使用LIKE语句来查询,总是占用CPU很忙,不管怎么优化,速度还是上不来; 2.经过网上收集资料,HUBBLE.net目前虽然做得不错,但需 ...

  6. FolderBrowserDialog 成员

    http://msdn.microsoft.com/zh-cn/library/system.windows.forms.folderbrowserdialog_members(v=vs.80).as ...

  7. windows下编译Libevent

    下载最新的libevent,目前是 libevent-2.0.21-stable.tar.gz 修改“D:\libevent-2.0.21-stable\event_iocp.c”.“D:\libev ...

  8. ASP文件操作(FSO)详解

    实例一:写入文件 语法 object.CreateTextFile([要建立的文件],[如存在,是否替代]) <% Set fs =Server.CreateObject("Scrip ...

  9. linux vi修改后如何保存

    linux vi修改后如何保存 按ESC键去到命令模式,然后: :w?? 保存文件但不退出vi :w file 将修改另外保存到file中,不退出vi :w! 强制保存,不推出vi :wq 保存文件并 ...

  10. Building Plugins for iOS

    This page describes Native Code Plugins for the iOS platform. Building an Application with a Native ...