React如何避免重渲染


Posted in Javascript onApril 10, 2018

组件的重新渲染

我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态。当 props 和 state 发生变化时,React 会重新渲染整个组件,组件重新渲染的过程可简化如下图:

React如何避免重渲染

译者之前对diff的理解是,对于一个改变 props 的组件,diff能自动计算出组件内部DOM树的不同,然后经过对比,找出真正变化的DOM节点,对变化部分进行渲染。这个是错误的理解,diff算法只是用来计算出改变状态或 props的组件/虚拟节点,而这个组件/虚拟节点,无论多大,它都会重新渲染。

假设有一个渲染完成的组件,如下图:

React如何避免重渲染

接下来因为状态改变,需要重新渲染下图的绿色的节点,如下图:

React如何避免重渲染

一般的想法是只需要更新下面的三个绿色节点就能够完成组件的更新

React如何避免重渲染

然而!只要组件的 props 或 state 发生了变化就会重新渲染整个组件,因此除了上述的三个绿色节点以外,还需要重新渲染所有的黄色的节点

React如何避免重渲染

除了必要渲染的三个节点外,还渲染了其他不必要渲染的节点,这对性能是一个很大的浪费。如果对于复杂的页面,这将导致页面的整体体验效果非常差。因此要提高组件的性能,就应该想尽一切方法减少不必要的渲染。

shouldComponentUpdate

shouldComponentUpdate这个函数会在组件重新渲染之前调用,函数的返回值确定了组件是否需要重新渲染。函数默认的返回值是 true,意思就是只要组件的 props 或者 state 发生了变化,就会重新构建 virtual DOM,然后使用 diff 算法进行比较,再接着根据比较结果决定是否重新渲染整个组件。函数的返回值为 false 表示不需要重新渲染。

函数默认返回为 true.

PureRenderMixin

React 官方提供了 PureRenderMixin 插件,插件的功能就是在不必要的情况下让函数 shouldComponentUpdate 返回 false, 使用这个插件就能够减少不必要的重新渲染,得到一定程度上的性能提升,其使用方法如下:

import PureRenderMixin from 'react-addons-pure-render-mixin';
  class FooComponent extends React.Component {
   constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }

   render() {
    return <div className={this.props.className}>foo</div>;
   }
  }

我们需要在组件中重写 shouldComponentUpdate,PureRenderMixin源码中对PureRenderMixin.shouldComponentUpdate的定义是这样

shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

重写的方法里面根据组件的目前的状态和组件接下来的状态进行浅比较,如果组件的状态发生变化则返回结果为 false,状态没有发生变化则返回结果为 true

shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) ||
        !shallowEqual(this.state, nextState);
  }

在 React 的最新版本里面,提供了 React.PureComponent 的基础类,而不需要使用这个插件。

译者注:所以在一个较大的组件决定重渲染的时候,我们可以在每一个子组件中绑定新的shouldComponentUpdate方法,这样可以减少子组件重新渲染的次数。

我们自己可以重写 shouldComponentUpdate 这个函数,使得其能够对任何事物进行比较,也就是深比较(通过一层一层的递归进行比较),深比较是很耗时的,一般不推荐这么干,因为要保证比较所花的时间少于重新渲染的整个组件所花的时间,同时为了减少比较所花的时间我们应该保证 props 和 state 尽量简单,不要把不必要的属性放入 state,能够由其他属性计算出来的属性也不要放入 state 中。

Immutable.js

对于复杂的数据的比较是非常耗时的,而且可能无法比较,通过使用 Immutable.js 能够很好地解决这个问题,Immutable.js 的基本原则是对于不变的对象返回相同的引用,而对于变化的对象,返回新的引用。因此对于状态的比较只需要使用如下代码即可:

shouldComponentUpdate() {
    return ref1 !== ref2;
  }

同样需要我们在子组件中将shouldComponentUpdate方法重写。

Pure Component

如果一个组件只和 props 和 state 有关系,给定相同的 props 和 state 就会渲染出相同的结果,那么这个组件就叫做纯组件,换一句话说纯组件只依赖于组件的 props 和 state,下面的代码表示的就是一个纯组件。

render() {
     return (
       <div style={{width: this.props.width}}>
           {this.state.rows}
       </div>
     );
  }

如果某个子组件的 props 是固定的不会发生变化,我们叫做无状态组件。在这个组件里面使用 pureRenderMixin 插件,能够保证 shouldComponentUpdate 的返回一直为 false。所以,分清纯组件和无状态组件,在无状态组件中重写shouldComponentUpdate方法是最好的选择。

key

在写动态子组件的时候,如果没有给动态子项添加key prop,则会报一个警告。这个警告指的是,如果每一个子组件是一个数组或者迭代器的话,那么必须有一个唯一的key prop,那么这个key prop是做什么的呢?
我们想象一下,假如需要渲染一个有5000项的成绩排名榜单,而且每隔几秒就会更新一次排名,其中大部分排名只是位置变了,还有少部分是完全更新了,这时候key就发挥作用了,它是用来标识当前的唯一性的props。现在尝试来描述这一场景

[{
   sid: '10001',
   name: 'sysuzhyupeng'
  }, {
   sid: '10008',
   name: 'zhyupeng'
  }, {
   sid: '120000',
   name: 'yupeng'
  }]

其中sid是学号,那么我们来实现成绩排名的榜单

import React from 'react';
  function Rank({ list }){
    return (
     <ul>
       {list.map((entry, index)=>(
         <li key={index}>{entry.name}</li>
       ))}
     </ul>
    )
  }

我们把key设成了序号,这么做的确不会报警告了,但这样是非常低效的做法,这个key是用来做virtual Dom diff的,上面的做法相当于用了一个随机键,那么不论有没有相同的项,更新都会重新渲染。

正确的做法非常简单,只需要把key的内容换成sid就可以了。

那么还有另一个问题,当key相同的时候,React会怎么渲染呢,答案是只渲染第一个相同key的项,且会报一个警告。

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

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
判断访客终端类型集锦
Jun 05 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
vue select组件的使用与禁用实现代码
Apr 10 #Javascript
vue 自定义 select内置组件
Apr 10 #Javascript
JavaScript如何对图片进行黑白化
Apr 10 #Javascript
axios 处理 302 状态码的解决方法
Apr 10 #Javascript
vue.js中npm安装教程图解
Apr 10 #Javascript
vue实现验证码按钮倒计时功能
Apr 10 #Javascript
vue 微信授权登录解决方案
Apr 10 #Javascript
You might like
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
easyui validatebox验证
2016/04/29 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Python 实现微信自动回复的方法
2020/09/11 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
手机银行营销方案
2014/03/14 职场文书
主题实践活动总结
2014/05/08 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
工作检讨书大全
2015/01/26 职场文书