React之PureComponent的使用作用


Posted in Javascript onJuly 10, 2018

React避免重复渲染

React在渲染出的UI内部建立和维护了一个内层的实现方式,它包括了从组件返回的React元素。这种实现方式使得React避免了一些不必要的创建和关联DOM节点,因为这样做可能比直接操作JavaScript对象更慢一些,它被称之为“虚拟DOM”。

当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM。当他们不相等时,React会更新DOM。

在一些情况下,你的组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度, 它是在重新渲染过程开始前触发的。 这个函数默认返回true,可使React执行更新:

shouldComponentUpdate(nextProps, nextState) {
 return true;
}

举例

如果想让组件只在props.color或者state.count的值变化时重新渲染,你可以像下面这样设定shouldComponentUpdate

class CounterButton extends React.Component {
 constructor(props) {
  super(props);
  this.state = {count: 1};
 }

 shouldComponentUpdate(nextProps, nextState) {
  if (this.props.color !== nextProps.color) {
   return true;
  }
  if (this.state.count !== nextState.count) {
   return true;
  }
  return false;
 }

 render() {
  return (
   <button
    color={this.props.color}
    onClick={() => this.setState(state => ({count: state.count + 1}))}>
    Count: {this.state.count}
   </button>
  );
 }
}

在以上代码中,shouldComponentUpdate只检查props.colorstate.count的变化。如果这些值没有变化,组件就不会更新。当你的组件变得更加复杂时,你可以使用类似的模式来做一个“浅比较”,用来比较属性和值以判定是否需要更新组件。这种模式十分常见,因此React提供了一个辅助对象来实现这个逻辑 - 继承自React.PureComponent。以下代码可以更简单的实现相同的操作:

class CounterButton extends React.PureComponent {
 constructor(props) {
  super(props);
  this.state = {count: 1};
 }

 render() {
  return (
   <button
    color={this.props.color}
    onClick={() => this.setState(state => ({count: state.count + 1}))}>
    Count: {this.state.count}
   </button>
  );
 }
}

PureComponent

原理

当组件更新时,如果组件的 props 和 state 都没发生改变, render 方法就不会触发,省去 Virtual DOM 的生成和比对过程,达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较:

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);
}

而 shallowEqual 又做了什么呢?会比较 Object.keys(state | props) 的长度是否一致,每一个 key 是否两者都有,并且是否是一个引用,也就是只比较了第一层的值,确实很浅,所以深层的嵌套数据是对比不出来的。

问题

大部分情况下,你可以使用React.PureComponent而不必写你自己的shouldComponentUpdate,它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况,此时你不能使用它。

class ListOfWords extends React.PureComponent {
 render() {
  return <div>{this.props.words.join(',')}</div>;
 }
}

class WordAdder extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   words: ['marklar']
  };
  this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
  // This section is bad style and causes a bug
  const words = this.state.words;
  words.push('marklar');
  this.setState({words: words});
 }

 render() {
  return (
   <div>
    <button onClick={this.handleClick} />
    <ListOfWords words={this.state.words} />
   </div>
  );
 }
}

在ListOfWords中,this.props.words是WordAdder中传入的其state的一个引用。虽然在WordAdder的handelClick方法中被改变了,但是对于ListOfWords来说,其引用是不变的,从而导致并没有被更新。

解决方法

在上面的问题中可以发现,当一个数据是不变数据时,可以使用一个引用。但是对于一个易变数据来说,不能使用引用的方式给到PureComponent。简单来说,就是我们在PureComponent外层来修改其使用的数据时,应该给其赋值一个新的对象或者引用,从而才能确保其能够进行重新渲染。例如上面例子中的handleClick可以通过以下几种来进行修改从而确认正确的渲染:

handleClick() {
 this.setState(prevState => ({
  words: prevState.words.concat(['marklar'])
 }));
}

或者

handleClick() {
 this.setState(prevState => ({
  words: [...prevState.words, 'marklar'],
 }));
};

或者针对对象结构:

function updateColorMap(oldObj) {
 return Object.assign({}, oldObj, {key: new value});
}

immutable.js

Immutable.js是解决这个问题的另一种方法。它通过结构共享提供不可突变的,持久的集合:

  • 不可突变:一旦创建,集合就不能在另一个时间点改变。
  • 持久性:可以使用原始集合和一个突变来创建新的集合。原始集合在新集合创建后仍然可用。
  • 结构共享:新集合尽可能多的使用原始集合的结构来创建,以便将复制操作降至最少从而提升性能。
// 常见的js处理
const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

// 使用 immutable.js

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
x === y; // false

总结

PureComponent 真正起作用的,只是在一些纯展示组件上,复杂组件使用的话shallowEqual 那一关基本就过不了。另外在使用的过程中为了确保能够正确的渲染,记得 props 和 state 不能使用同一个引用哦。

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

Javascript 相关文章推荐
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
理解JavaScript中的对象
Aug 25 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 #Javascript
echarts整合多个类似option的方法实例
Jul 10 #Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 #Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 #Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 #Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 #Javascript
vue超时计算的组件实例代码
Jul 09 #Javascript
You might like
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
再探JavaScript作用域
2014/09/24 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
babel基本使用详解
2017/02/17 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
2014年医院十一国庆节活动方案
2014/09/15 职场文书
融资合作协议书范本
2014/10/17 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android