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 入门基础学习
Mar 10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
js实现二级联动简单实例
Jan 11 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
DWR Ext 加载数据
2009/03/22 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js转义字符介绍
2013/11/05 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
express异步函数异常捕获示例详解
2020/11/30 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
公司地址变更通知
2015/04/25 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
如何写好竞聘报告
2019/04/03 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
《废话连篇——致新手》——chinapizza
2022/04/05 无线电