浅谈React组件之性能优化


Posted in Javascript onMarch 02, 2018

高德纳: "我们应该忘记忽略很小的性能优化,可以说97%的情况下,过早的优化是万恶之源,而我们应该关心对性能影响最关键的另外3%的代码。"

不要将性能优化的精力浪费在对整体性能提高不大的代码上,而对性能有关键影响的部分,优化并不嫌早。因为,对性能影响最关键的部分,往往涉及解决方案核心,决定整体的架构,将来要改变的时候牵扯更大。

1. 单个React组件的性能优化

React利用Virtual DOM来提升渲染性能,虽然每一次页面更新都是最组件的从新渲染,但是并不是将之前的渲染内容全部抛弃重来,借助Virtual DOM,React能够计算出对DOM树的最少修改,这就是React默认情况下渲染都很迅速的秘诀;

不过,虽然Virtual DOM能够将每次DOM操作量减少到最小,但,计算和比较Virtual DOM依然是一个复杂的过程;

当然,如果能够在开始计算Virtual DOM之前就判断渲染的结果不会有变化,那么就可以不进行Virtual DOM计算和比较,速度就会更快。

2.shouldComponentUpdate的默认实现方式

既然可以对组件在开始计算Virtual DOM之前判断渲染结果不会有变化时,阻止渲染的进行,从而提升性能,那么我们自然想到使用shouldComponentUpdate(nextProp,nextState)

shouldComponentUpdate函数在render函数之前调用,决定“什么时候不需要从新渲染”;

即返回一个布尔值,决定更新是否进行下去,默认返回true,若返回false则中断更新;

shouldComponentUpdate(nextProp,nextState){
  return (nextProp.completed !== this.props.completed) ||
    (nextProp.text !== this.props.text)
}

其中nextProps为此次更新传入的props,对于这个组件,影响渲染内容的prop只有completed和text,只要确保这两个prop没有变化,shouldComponentUpdate就可以返回false阻止没必要的更新

但是,上述的比较只是‘浅层比较',如果类型是基本类型,只要值相同,那么“浅层比较”

也会认为二者相同:

那,如果prop的类型是复杂的对象怎么办?

对于复杂对象,‘浅层比较'的方式只看这两个prop是不是同一个对象的引用,如果不是,哪怕对象中的内容完全一样也会认为是不同的两个prop。那么使用“深层比较”:但对对象的结构是无法预知的,如果递归对每个字段都进行“深层比较”,不光会让代码更加复杂,也可能会造成性能问题。

所以,要想判断前后的对象类型的prop是相同的,就必须要保证prop是指向同一个JavaScript对象:

<Foo styleProp = {{color: "red"}}>

要避免使用上面的传入方式,应为每次渲染都会重新创建{color: "red"}对象,引用地址每次都不同,将导致每次的styleProp都不同。

const footStyle = {color: "red"};//确保这个初始化只执行一次,不要放在render函数中
<Foo styleProp = {footStyle}>

使用‘单例模式'确保传入的styleProp指向同一个对象

如果是函数呢?

<Foo onToggle={() => onToggleTodo(item.id)}/>

应该避免使用上面的函数传递模式,因为这里赋值的是一个匿名函数,而且是在赋值的时候产生的,也就是说每次渲染都会产生一个新的函数,这就是问题所在。

如果要传递的prop很多呢?

恩~~用React-Redux的话,有对shouldComponentUpdate的默认实现。

3. 对多个React组件的性能优化

当一个React组件被装载、更新和卸载时,组件的一序列生命周期函数会被调用。不过,这些生命周期函数是针对一个特定的React组件函数,在一个应用中,从上而下有很多React组件组合起来,它们之间的渲染过程要更加复杂。

同样一个组件的渲染过程也要考虑三个过程:装载阶段、更新阶段、卸载阶段

对于装载阶段,组件无论如何都要彻底渲染一次,从这个React组件往下的所有子组件,都要经历一遍React组件的装载生命
周期,所以并没有多少优化的事情可做。

对于卸载阶段,只有一个生命周期函数componentWillUnmount,这个函数只是清理componentDidMount添加的事件处理监听等收尾工作,所以,也没有什么可优化的空间;

4. React更新阶段的调和(Reconciliation)过程

在组件更新过程,会构建更新Virtual DOM,并将其与之前的Virtual DOM进行比较,从而找出不同之处,使用最少的DOM操作进行更新

调和过程:即React更新中对Virtual DOM找不同的过程,通常对比两个N个节点的树形结构的算法,时间复杂度是O(n*3),如果直接

使用默认对比,节点过多的话,需要操作的数量太多,而React不可能采用这种算法;

React实际采用的算法时间复杂度是O(N)(时间复杂度只是对一个算法最好和最差情况下需要的指令操作数量级的估量)

React的Reconciliation算法并不复杂,首先检查两个树形的根节点的类型是否相同,根据相同或者不同有不同的处理方式:

节点类型不同的情况

如果树形节点的类型不相同,那就意味着改动很大,直接认为原来的那个树形结构已经没用,可以扔掉,需要从新构建DOM树,原有的树形上的React组件便会经历“卸载”的生命周期;

也就是说,对于Virtual DOM树这是一个“更新”过程,但是却可能引发这个树结构上某些组件的“装载”和“卸载”过程
如:

更新前

<div>
  <Todos />
 </div>

我们想要更新成这样:

<span>
   <Todos />
 </span>

>1. 那么在作比较的时候,一看根节点原来是div,新的是span,类型就不一样了,那么这个算法就废弃之前的div包括里面的所有子节点,从新构建一个span节点和子节点;

>2. 很明显因为根节点不同就将所有的子节点从新构建,这很浪费,但是为了避免O(N*3)的时间复杂度,React这能选择这种比较简单、快捷的方法;

>3. 所以,作为开发者,我们一定要避免上面的浪费的情景出现

节点类型相同的情况

如果两个节点类型相同时,对于DOM元素,React会保留节点对应的DOM元素,只对其节点的属性和内容做对比,然后只修改更新的部分;

节点类型相同时,对于React组件类型,React做得是根据新节点的props去更新节点的组件实例,引发组件的更新过程;

在处理完根节点对比后,React的算法会对根节点的每一个子节点重复一样的操作

多个相同子组件的情况

如果最初组件状态为:

<ul>
  <TodoItem text = "First" />
  <TodoItem text = "Second" />

</ul>

更新后为:

<ul>
  <TodoItem text = "First" />
  <TodoItem text = "Second" />
  <TodoItem text = "Third" />
</ul>

那么React会创建一个新的TodoItem组件实例,而前两个则进行正常的更新过程但是,如果更新后为:

<ul>
  <TodoItem text = "Zero" />
  <TodoItem text = "First" />
  <TodoItem text = "Second" />

</ul>

(这将暴露一个问题)理想处理方式是,创建一个新的TodoItem组件实例放在第一位,后两个进入自然更新过程
但是要让react按照这种方式,就必须找两个子组件的不同之处,而现有计算两个序列差异的算法时间是O(N*2),显然则
不适合对性能要求很高的场景,所以React选择了一个看起来很傻的办法,即挨个比较每个子组件;

React首先认为把text为First的组件的text改为Zero,Second的改为First,最后创建一个text为Second的组件,这样便会破原有的两个组件完成一个更新过程,并创建一个text为Second的新组件

这显然是一个浪费,React也意到,并提供了方克服,不过需要开发人员提供一点帮助,这就是key

Key的使用

key属性可以明确的告诉React每个组件的唯一标识

如果最初组件状态为:

<ul>
  <TodoItem key={1} text = "First" />
  <TodoItem key={2} text = "Second" />

</ul>

更新后为:

<ul>
  <TodoItem key={0} text = "Zero" />
  <TodoItem key={1} text = "First" />
  <TodoItem key={2} text = "Second" />
</ul>

因为有唯一标识key,React可以根据key值,知道现在的第二和第三个组件就是之前的第一和第二个,便用原来的props启动更新过程,这样shouldComponentUpdate就会发生作用,避免无谓的更新;

注意:因为作为组件的唯一标识,所以key必须唯一,且不可变

下面的代码是错误的例子:

<ul>
  todos.map((item,index) => {
      <TodoItem
        key={index}
        text={item.text}
      />
    })
</ul>

使用数组下标作为key值,看起来唯一,但不稳定,因为随着todos数组值的不同,同样一个组件实例在不同的更新过程中数组的下标完全可能不同,把下标当做可以就会让React乱套,记住key不仅要唯一还要确保稳定不可变

需要注意:虽然key是一个prop,但是接受key的组件不能读取key的值,因为key和ref是React保留的两个特殊prop,并没有预期让组将直接访问。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
Vue组件化开发思考
Feb 02 Javascript
详解vue的diff算法原理
May 20 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 #Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 #Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 #Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 #Javascript
详解node.js 下载图片的 2 种方式
Mar 02 #Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 #Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 #Javascript
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php内嵌函数用法实例
2015/03/20 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
详解Python中的文本处理
2015/04/11 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python实现飞机大战
2018/09/11 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python实现井字棋小游戏
2020/03/09 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
经管应届生求职信范文
2014/05/18 职场文书
毕业生求职信范文
2014/06/29 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
护理工作个人总结
2015/03/03 职场文书
未中标通知书
2015/04/17 职场文书
东京审判观后感
2015/06/01 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python