React如何性能调优
一、
二、调优例子
<!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如何性能调优的更多相关文章
- React组件性能调优
React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...
- React 性能调优总结
React 性能调优总结 首先要说一个库: why-did-you-update, 地址:why-did-you-update, 利用这个库可以在页面上快速看到多余渲染的问题: 因为多数情况下我们在R ...
- 小程序组件化框架 WePY 在性能调优上做出的探究
作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...
- web前端性能调优
最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...
- ［网站性能2］Asp.net平台下网站性能调优的实战方案
文章来源:http://www.cnblogs.com/dingjie08/archive/2009/11/10/1599929.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错, ...
- Asp.net平台下网站性能调优的实战方案（转）
转载地址:http://www.cnblogs.com/chenkai/archive/2009/11/07/1597795.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错,所以写出来 ...
- 第0/24周 SQL Server 性能调优培训引言
大家好,这是我在博客园写的第一篇博文,之所以要开这个博客,是我对MS SQL技术学习的一个兴趣记录. 作为计算机专业毕业的人,自己对技术的掌握总是觉得很肤浅,博而不专,到现在我才发现自己的兴趣所在,于 ...
- sqlserver性能调优第一步
相信不少的朋友,无论是做开发.架构的,还是DBA等,都经常听说“调优”这个词.说起“调优”,可能会让很多技术人员心头激情澎湃,也可能会让很多人感觉苦恼,不知道如何入手.当然,也有很多人对此不屑一顾,因 ...
- JavaScript：内存泄露、性能调优
1.在进行JS内存泄露检查之前,先要了解JS的内存管理: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Manageme ...
随机推荐
- 【转】Mac 上 java 究竟在哪里，本文彻底让你搞清楚！
这篇文章可能比较适合那些在经常在Mac下进行Java编程开发,或者经常使用Java工具的朋友.不关心Java或者不了解Java的朋友可以绕过本文哈~ 1. Mac下当你在[终端]输入java -ver ...
- flex 监听网络连接情况
NativeApplication.nativeApplication.addEventListener(Event.NETWORK_CHANGE, onNetworkChange); private ...
- synchronized 用法，实例讲解
package com.asiainfolinkage.ems.web.controller.base; import java.math.BigInteger; import java.util.D ...
- centos 6.4 apache开启gzip方法
系统概况,主机CentOS6.4 Apache2.4 php5.3.6 mysql5.5 开始:首先得确认apache是否已经加载了mod_deflate模块 1.httpd -M 在结果中查看是否 ...
- [转载]iOS面试题总
转载自:http://blog.sina.com.cn/s/blog_67eb608b0101r6xb.html (2014-06-13 20:23:33) 转载▼ 标签: 转载 crash 原文 ...
- cookie、session的联系和区别，多台web服务器如何共享session？
cookie在客户端保存状态,session在服务器端保存状态.但是由于在服务器端保存状态的时候,在客户端也需要一个标识,所以session也可能要借助cookie来实现保存标识位的作用.cookie ...
- 【CocoaPods】配置CocoaPods后 - CocoaPods使用
配置CocoaPods后 - CocoaPods使用 极速化 CocoaPods : 1 .使用淘宝 Ruby Gems 源(Cocoapods 使用 ruby 开发) gem sources -l ...
- redhat或centos关闭防火墙并开启sshd服务
使用putty连接虚拟机的redhat连不上时处理方案: 这里使用的是VMware Workstation, 将宿主机与虚拟机之间的网络使用 ‘桥接方式’: 1.关闭宿主机与虚拟机的防火墙, 在re ...
- Notes of the scrum meeting(10/31)
meeting time:3:00~4:30p.m.,October 30th,2013 meeting place:绿园 attendees: 顾育豪 ...
- iOS - 指定视图的圆角个数-b
平常设置视图的圆角最普遍的就是设置四个角的,方法也就是一句代码解决: view.layer.cornerRadius = 10; 四个圆角 但有时需求会是指定某个,或者特定哪几个角设置圆角,所以我们需 ...