正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate
性能优化
每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的。
避免直接作用于DOM
react实现了一层虚拟dom,它用来映射浏览器的原生dom树。通过这一层虚拟的dom,可以让react避免直接操作dom,因为直接操作浏览器dom的速度要远低于操作JavaScript对象。每当组件的属性或者状态发生改变时,react会在内存中构造一个新的虚拟dom与原先老的进行对比,用来判断是否需要更新浏览器的dom树,这样就尽可能的优化了渲染dom的性能损耗。
在此之上,react提供了组件生命周期函数,shouldComponentUpdate
,组件在决定重新渲染(虚拟dom比对完毕生成最终的dom后)之前会调用该函数,该函数将是否重新渲染的权限交给了开发者,该函数默认直接返回true
,表示默认直接出发dom更新:
shouldComponentUpdate: function(nextProps, nextState) {
return true;
}
值得注意的是,react会非常频繁的调用该函数,所以如果你打算自己实现该函数的逻辑,请尽可能保证性能。
比方说,你有一个拥有多个帖子的聊天应用,如果此时只有一个发生了变化,如果你如下实现了shouldComponentUpdate
,react会根据情况避免重新渲染那些没有发生变化的帖子:
shouldComponentUpdate: function(nextProps, nextState) {
// TODO: return whether or not current chat thread is different to former one.
// 根据实际情况判断当前帖子的状态是否和之前不同
}
总之,react尽可能的避免了昂贵的dom操作,并且允许开发者干涉该行为。
shouldComponentUpdate实战
这里举个包含子元素的组件例子,如下图:
图中每个圆点表示一个dom节点,当某个dom节点的shouldComponentUpdate
返回false
时(例如c2),react就无需为其更新dom,注意,react甚至根本不会去调用c4和c5节点的shouldComponentUpdate
函数哦~
图中c1和c3的shouldComponentUpdate
返回了true
,因此react会检查检查其它们包含的直接子节点。最有趣的是c8节点,虽然调用它的shouldComponentUpdate
方法返回的是true
,但react检查后发现其dom结构并未发生改变,所以react最终是不会重新渲染其浏览器dom的。
上图的情况下,react最终只会重新渲染c6,原因你应该懂的。
那么我们应该如何实现shouldComponentUpdate
函数呢?假设你有一个只包含字符串的组件,如下:
React.createClass({
propTypes: {
value: React.PropTypes.string.isRequired
},
render: function() {
return <div>{this.props.value}</div>;
}
});
我们可以简单的直接实现shouldComponentUpdate
如下:
shouldComponentUpdate: function(nextProps, nextState) {
return this.props.value !== nextProps.value;
}
目前为止一切都很顺利,处理基础类型的属性和状态是很简单的,我们可以直接使用js语言提供的===
比对来实现一个mix并注入到所有组件中,事实上,react自身已经提供了一个类似的:PureRenderMixin。
但是如果你的组件所拥有的属性或状态不是基础类型呢,而是复合类型呢?比方说是一个js对象,{foo: 'bar'}
:
React.createClass({
propTypes: {
value: React.PropTypes.object.isRequired
},
render: function() {
return <div>{this.props.value.foo}</div>;
}
});
这种情况下我们刚才实现的那种shouldComponentUpdate
就歇菜了:
// 假设 this.props.value 是 { foo: 'bar' }
// 假设 nextProps.value 是 { foo: 'bar' },
// 但是nextProps和this.props对应的引用不相同
this.props.value !== nextProps.value; // true
要想修复这个问题,简单粗暴的方法是我们直接比对foo
的值,如下:
shouldComponentUpdate: function(nextProps, nextState) {
return this.props.value.foo !== nextProps.value.foo;
}
我们当然可以通过深比对来确定属性或状态是否确实发生了改变,但是这种深比对是非常昂贵的,还记得我们刚出说过shouldComponentUpdate
函数的调用非常频繁么?更何况我们为每个model去单独实现一个匹配的深比对逻辑,对于开发人员来说也是非常痛苦的。最重要的是,如果我们不是很小心的处理对象引用关系的话,还会带来灾难。例如下面这个组件:
React.createClass({
getInitialState: function() {
return { value: { foo: 'bar' } };
},
onClick: function() {
var value = this.state.value;
value.foo += 'bar'; // ANTI-PATTERN!
this.setState({ value: value });
},
render: function() {
return (
<div>
<InnerComponent value={this.state.value} />
<a onClick={this.onClick}>Click me</a>
</div>
);
}
});
起初,InnerComponent组件进行渲染,它得到的value属性为{foo: 'bar'}
。当用户点击链接后,父组件的状态将会更新为{ value: { foo: 'barbar' } }
,触发了InnerComponent组件的重新渲染,因为它得到了一个新的属性:{ foo: 'barbar' }
。
看上去一切都挺好的,其实问题在于,父组件和子组件供用了同一个对象的引用,当用户触发click事件时,InnerComponent的prop将会发生改变,因此它的shouldComponentUpdate
函数将会被调用,而此时如果按照我们目前的shouldComponentUpdate
比对逻辑的话,this.props.value.foo
和nextProps.value.foo
是相等的,因为事实上,它们同时引用同一个对象哦~所以,我们将会看到,InnerComponent的ui并没有更新。哎~,不信的话,我贴出完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<!--引入React库-->
<script src="lib/react.min.js"></script>
<!--引入JSX转换库-->
<script src="lib/JSXTransformer.js"></script>
<!--组件样式-->
</head>
<body>
<!--定义容器-->
<div id="content"></div>
<!--声明脚本类型为JSX-->
<script type="text/jsx">
var InnerComponent = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return this.props.value.foo !== nextProps.value.foo;
},
render: function() {
return (
<div>
{this.props.value.foo}
</div>
);
}
});
var OutComponent = React.createClass({
getInitialState: function() {
return { value: { foo: 'bar' } };
},
onClick: function() {
var value = this.state.value;
value.foo += 'bar'; // ANTI-PATTERN!
this.setState({ value: value });
},
render: function() {
return (
<div>
<InnerComponent value={this.state.value} />
<a onClick={this.onClick}>Click me</a>
</div>
);
}
});
React.render(<OutComponent />, document.querySelector("#content"));
</script>
</body>
</html>
正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate的更多相关文章
- Netty学习笔记(番外篇) - ChannelHandler、ChannelPipeline和ChannelHandlerContext的联系
这一篇是 ChannelHandler 和 ChannelPipeline 的番外篇,主要从源码的角度来学习 ChannelHandler.ChannelHandler 和 ChannelPipeli ...
- 正式学习 react(三)
有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...
- 正式学习React( 三)
最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周 ...
- 正式学习React(五) react-redux源码分析
磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里 shallowEqual.js export default function shallowEqual(objA, ...
- 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...
- Opengl_入门学习分享和记录_番外篇01(MacOS上如何在Xcode 开始编辑OpenGL)
写在前面的废话: 哈哈 ,我可真是勤勉呢,今天又来更新了,这篇文章需要大家接着昨天的番外篇00一起食用! 正文开始: 话不多说,先看代码. 这里主要全是使用的glfwwindowhint 这个函数,他 ...
- openresty 学习笔记番外篇:python的一些扩展库
openresty 学习笔记番外篇:python的一些扩展库 要写一个可以使用的python程序还需要比如日志输出,读取配置文件,作为守护进程运行等 读取配置文件 使用自带的ConfigParser模 ...
- openresty 学习笔记番外篇:python访问RabbitMQ消息队列
openresty 学习笔记番外篇:python访问RabbitMQ消息队列 python使用pika扩展库操作RabbitMQ的流程梳理. 客户端连接到消息队列服务器,打开一个channel. 客户 ...
- 《手把手教你》系列技巧篇(三十一)-java+ selenium自动化测试- Actions的相关操作-番外篇(详解教程)
1.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...
随机推荐
- Hdu1090
#include <stdio.h> int main() { int i,T,a,b; scanf("%d",&T); ;i<T;i++){ scanf ...
- 使用PHP从web访问mysql数据库
一. web数据库构架的工作原理 1. 用户由浏览器发出HTTP请求,请求特定的web页面. 2. web服务器接受接收到对特定页面的请求,检索相应文件,并将其传递给php引擎处理. 3. php引擎 ...
- syscomments 可以用来查找所有关于库中用到的某个关键词的所有相关脚本
syscomments SELECT * FROM syscomments
- Remove Duplicates from Sorted Array 解答
Question Given a sorted array, remove the duplicates in place such that each element appear only onc ...
- XMPP通讯开发-仿QQ显示好友列表和用户组
在 XMPP通讯开发-服务器好友获取以及监听状态变化 中我们获取服务器上的用户好友信息,然后结合XMPP通讯开发-好友获取界面设计 我们将两个合并起来,首先获取用户组,然后把用户组用List ...
- 网易云课堂_C++开发入门到精通_章节8:设计模式
课时44设计模式简介 设计模式简介 面向对象设计的第一个原则:针对接口编程,而不是针对实现编程 接口->指针 实现->实例 若已存在一个类Class A,现在希望复用Class A,则有以 ...
- PHP MySQL Update 之 Update
更新数据库中的数据 UPDATE 语句用于在数据库表中修改数据. 语法 UPDATE table_name SET column_name = new_value WHERE column_name ...
- 一些常用运行命令和CMD命令
运行命令 1. 进入服务页面的命令: services.msc 2. 远程连接命令:mstsc.exe 3. 配置电脑启动项 msconfig 4. 计算器 calc.exe 5. 设定关机时间(se ...
- NGUI研究之制作转圈的技能CD特效
昨天想做一个技能CD转圈的特效,花了大把的时间去用meshRender组件想通过三角形依据数学算法来绘制一个圆形的网格.通过动态绘制圆形网格的方法来实现技能CD特效.奶奶的昨天我研究了一晚上,最 ...
- VisualStudio.DTE 对象可以通过检索 GetService() 方法
DTE dte = (DTE)GetService(typeof(DTE)); string solutionDir = System.IO.Path.GetDirectoryName(dte.Sol ...