一、

二、调优例子

 <!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. 分享：Perl打开与读取文件的方法

    在Perl中可以用open或者sysopen函数来打开文件进行操作,这两个函数都需要通过一个文件句柄(即文件指针)来对文件进行读写定位等操作. Perl打开与读取文件的方法,供大家学习参考.本文转自: ...

  2. 配置Windows 2008 R2 64位 Odoo 8.0/9.0 源码开发调试环境

    安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

  3. Java注意的地方

    oo: 单一原则(SRP) 开放封闭原则(OCP) 里氏替换原则(LSP) 依赖倒转原则(DIP) 接口分离原则(ISP) equals: 若两个对象equals为true,则他们的hashcode值 ...

  4. ref和out

    网上对这两个关键字的讨论,已经很多了,先给出一个链接:http://blog.csdn.net/xiaoning8201/article/details/6893154 自己做几条笔记,记得牢一些: ...

  5. Game Tutorials

    SDL: http://www.sdltutorials.com/tutorials        http://lazyfoo.net/ http://panda3d.noie.name/ http ...

  6. iOS网络编程同步GET方法请求编程

    iOS SDK为HTTP请求提供了同步和异步请求两种不同的API,而且可以使用GET或POST等请求方法.我们先了解其中最为简单的同步GET方法请求. 首先实现查询业务,查询业务请求可以在主视图控制器 ...

  7. Scrum10-22

    Time:2013-10-22 Author:居玉皓 Things we have done since yesterday's meeting: 在今天的Scrum中,STORY1 开发前期准备工作 ...

  8. SQL Server数据库文件存储目录转移

    USE master GO DECLARE @DBName sysname, ) DECLARE @DB table( name sysname, physical_name sysname) BEG ...

  9. D2GS1.11 的DC Key的相關設置指南

    D2GS1.11版本暗黑戰網服務器DC Key 的相關設置是保存在 D2Server.ini 文件中的.在這裡我列舉跟DC Key 有關的配置條款. (以下內容具存在於D2Server.ini 文件中 ...

  10. [C#]Linq To Xml 介绍- 转

    LINQ to XML 类概述 LINQ to XML 旨在使 XML 名称尽可能简单.     XAttribute 类 XAttribute 表示一个 XML 属性. XCData 类 XCDat ...