一、

二、调优例子

 <!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. php中fopen函数用法详解(打开文件)

    介绍下php中的fopen函数. 1.resource  fopen(string  $filename, string $mode [,bool $use_include_path [, resou ...

  2. 强大的网络通信框架（不实现缓存）--第三方开源--AsyncHttpClient

    AsyncHttpClient是一款比较流行的Android异步网路加载库,在github上的网址是:https://github.com/loopj/android-async-http但是Asyn ...

  3. 在有跳板机的情况下，SecureCRT自动连接到目标服务器

    为了服务器的安全,运维人员经常会要求我们先登录到跳板机,然后再SSH连接到目标服务器.但是这样是很繁琐的,每次在SecureCRT创建一个连接,都需要输入SSH命令,然后输入密码. 下面的方法可以实现 ...

  4. mac常用设置

    1.修改mac主机名 系统偏好设置->共享->电脑名称 ,编辑就可以了. sudo scutil --set HostName hostname 这个是修改主机名 sudo scutil ...

  5. VS编译时自动下载NuGet管理的库

    之前一直使用NuGet来管理一些第三方的库,但是每次check in代码时候为了保证编译通过,都需要把对应的packages check in. 比较耗费时间,特别是往github上同步代码,而且这些 ...

  6. mysql 连接语句

    在 SELECT 语句中,如果 FROM 子句引用了多个表源或视图,可以使用 JOIN 指示指定的联接操作应在指定的表源或视图之间执行. 一.交叉联接:CROSS JOIN 交叉联接将执行一个叉积(迪 ...

  7. 流水线（pipe-line）简介

    1.什么是流水线设计技术? 答:所谓流水线设计实际上是把规模较大.层次较多的组合逻辑电路分为几个级,在每一级插入寄存器组并暂存数据. K级就是有K个寄存器组,从上到下没有反馈电路. 2.流水线设计的深 ...

  8. js SVG

    Snap.svg Paths.js http://www.sitepoint.com/creating-animated-valentines-day-card-snap-svg/

  9. ADO.NET- 基础总结及实例介绍

    最近闲暇时间写的一些小程序中,访问数据库比较多:下面主要介绍下ADO.NET方面知识,有不足之处,希望大神们不吝赐教: 提到ADO.NET,经常会和ASP.NET进行混淆,两者的区别很大,没有可比性, ...

  10. protocol buffer 整数序列化

    http://blog.csdn.net/csfreebird/article/details/7624807 varints用于正整数 (无符号整数) varints 是 一个很不错的技术.将一个整 ...