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 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
jquery replace方法去空格
May 08 jQuery
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
详解vue组件之间的通信
Aug 30 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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删除数组指定元素实现代码
2017/05/03 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
研究生自我鉴定范文
2013/10/30 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
授权委托书格式
2014/07/31 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
党校党性分析材料
2014/12/19 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
pytorch中[..., 0]的用法说明
2021/05/20 Python
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python