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 ...
随机推荐
- 简单方便的在线客服展示插件 jQuery.onServ
onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...
- hdu 5719 BestCoder 2nd Anniversary B Arrange 简单计数问题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5719 题意:一个数列为1~N的排列,给定mn[1...n]和mx[1...n],问有符合的排列数为多少 ...
- Ubuntu下编程环境GNU安装
ubuntu下C编程 环境搭建 其实,linux下写C也是很容易的.IDE的话用 eclipse 集成 CDT 模块就行了.当然这属于重量级的了,就如同VC++之于windows一样.那有没有像T ...
- 查看MYSQL数据库中所有用户及拥有权限
查看MYSQL数据库中所有用户 mysql> SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM m ...
- Entity Framework4.0 (六) EF4的 增加、删除、更改
前面介绍了EF4的查询功能,主要是借助于LINQ的强大的查询功能和它简单的语法.让我们可以完全面向对象集体去进行查询,而不必去劳心处理那些关系型数据库表的操作.这样我们更容易把主要精力集中在业务逻辑上 ...
- Log4j配置和简单使用
Log4j是一款基于Java的开源日志组件,Log4j功能非常强大,我们可以将日志信息输出到控制台.文件.用户界面,也可以输出到操作系统的事件记录器和一些系统常驻进程.更值得一提的是,Log4j可以允 ...
- Excel取消保护密码
Excel表被保护了, 如果没有密码, 可通过以下宏代码查看 (Office 2013已测) Option Explicit Public Sub AllInternalPasswords()' Br ...
- easyui的datagrid和panel如何让标题动态改变？
解决方法: 用$(this).datagrid("getPanel").panel("setTitle","new title").$(th ...
- [sql server、oracle] 分组取最大值最小值常用sql
sqlserver2005前: --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( ...
- Netty4.x中文教程系列(三) ChannelHandler
Netty4.x中文教程系列(四) ChannelHandler 上一篇文章详细解释了Hello World示例的代码.里面涉及了一些Netty框架的基础. 这篇文章用以解释ChannelHandl ...