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 ...
随机推荐
- PHP获取和操作配置文件php.ini的几个函数
当无法修改php.ini配置文件怎么办,莫担心. php有一套设置和获取配置信息的函数. 1.ini_get()获取配置参数,ini_set()设置配置参数 <?php
- protected internal修饰符
见过这样的修饰符,但是没有仔细考虑过,今天做一个小练习. 先给出一个链接,别人在网上讨论的:http://wenku.baidu.com/view/4023f65abe23482fb4da4cfe.h ...
- 隐藏wmware到系统托盘
[此方法是百度到的,经整理放在这里以防忘记.] 1.打开VMware Authorization Service服务.控制面板--管理工具--服务,在里面找到VMware Authorization ...
- 11G RAC 简单命令
1.查看集群状态: [root@rac1 ~]# su - grid [grid@rac1 ~]$ crsctl check clusterCRS-4537: Cluster Ready Servic ...
- MySQL在ROW模式下通过binlog提取SQL语句
Linux基于row模式的binlog,生成DML(insert/update/delete)的rollback语句通过mysqlbinlog -v 解析binlog生成可读的sql文件提取需要处理的 ...
- Ubuntu下Apache+php+mysql网站架设详解
目录 1 基础 2 安装 2.1 安装LAMP 2.2 图形化管理软件(可选) 2.2.1 安装webmin 2.2.2 安装phpmyadmin 3 配置文件路径 3.1 常用命令 3.2 配置ap ...
- Qt版helloworld
跟学别的编程语言一样,Qt也不例外,一开始就想写一个helloworld.初学Qt十几天,看了一点关于Qt视频的介绍和书上的基础知识,对于Qt写工程的概念有了初步的认识,就代码的形式来说,Qt Cre ...
- SQL Server数据库文件存储目录转移
USE master GO DECLARE @DBName sysname, ) DECLARE @DB table( name sysname, physical_name sysname) BEG ...
- MapInfo格式转arggis格式
1. 下载MapInfo 11.0 2. 打开工具里的转换工具 3. 选择数据源和结果文件夹(目录中不能包含中文) 4. 转换成功.
- 2432: [Noi2011]兔农 - BZOJ
Description 农夫栋栋近年收入不景气,正在他发愁如何能多赚点钱时,他听到隔壁的小朋友在讨论兔子繁殖的问题. 问题是这样的:第一个月初有一对刚出生的小兔子,经过两个月长大后,这对兔子从第三个月 ...