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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
详解在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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python入门篇之文件
2014/10/20 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
小学教师管理制度
2014/01/18 职场文书
2015元旦节寄语
2014/12/08 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python