详解在React.js中使用PureComponent的重要性和使用方式


Posted in Javascript onJuly 10, 2018

一、介绍PureComponent

React 15.3在2016.06.29发布了,这个版本最值得关注的是支持了 React.PureComponent ,它取代了之前的 pure-render-mixin 。在本文中,我们将讨论 PureComponent 的重要性和使用场景。

React.PureComponent最重要的一个用处就是优化React应用,这很容易快速地实现。使用 React.PureComponent 对性能的提升是非常可观的,因为它减少了应用中的渲染次数。

详解在React.js中使用PureComponent的重要性和使用方式

PureComponent改变了生命周期方法 shouldComponentupdate ,并且它会自动检查组件是否需要重新渲染。这时,只有PureComponent检测到 state 或者 props 发生变化时,PureComponent才会调用 render 方法,因此,你不用手动写额外的检查,就可以在很多组件中改变 state , 例如:

if (this.state.someVal !== computedVal) {
 this.setState({ someVal: computedVal })
}

根据React源码,如果组件是纯组件(Pure Component),那么一下比较是很容易理解的:

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

其中, shadowEqual 只会"浅"检查组件的 props state ,这就意味着嵌套对象和数组是不会被比较的。

深比较操作是非常昂贵的,同时,如果这个组件还是纯组件(PureComponent),那么深比较将会更浪费。另外,你也可以使用 shouldComponentUpdate 来手动确定组件是否需要重新渲染。最简单的方式就是直接比较 props state :

shouldComponentUpdate(nextProps, nextState) {
 return nextProps.user.id === props.user.id;
}

除此之外,你可以使用 immutable 属性。这种情况下,属性的比较是非常容易的,因为已存在的对象不会发生改变,取而代之的是重新创建新的对象。其中, Immutable.js 就是非常好的Immutable库。

二、使用PureComponent

PureComponent节约了我们的时间,避免了多余的代码。那么,掌握如何正确使用它是非常重要的,否则如果使用不当,它就无法发挥作用。因为PureComponent仅仅是浅比较(shadow comparison),所以改变组件内部的 props 或者 state ,它将不会发挥作用。例如,让我们想想这样一种情况,父组件有一个render方法和一个click处理方法:

handleClick() {
 let {items} = this.state

 items.push('new-item')
 this.setState({ items })
}

render() {
 return (
  <div>
   <button onClick={this.handleClick} />
   <ItemList items={this.state.items} />
  </div>
 )
}

如果ItemList是纯组件(PureComponent),那么这时它是不会被渲染的,因为尽管 this.state.items 的值发生了改变,但是它仍然指向同一个对象的引用。但是,通过移除可变对象就很容易改变这种情况,使之能够正确被渲染。

handleClick() {
 this.setState(prevState => ({
  words: prevState.items.concat(['new-item'])
 }));
}

如果一个纯组件(PureComponent)的 state 或 props 引用了一个新对象,那么这个组件就会被重新渲染(re-render)。这暗示着,如果不想损失PureComponent的优点,那么我们应该避免以下的结构:

<Entity values={this.props.values || []}/>

如上面代码,新数组,即便是空数组,总是会迫使组件重新渲染。为了避免这个问题,你可以使用 defaultProps ,它包含了一个属性的初始化空状态。解决这个问题的另一种方法如下:

<CustomInput onChange={e => this.props.update(e.target.value)} />

在纯组件(PureComponent)被创建时,因为函数的新对象被创建了,所以它会获得新数据,并且重新渲染。解决这个问题最简单的方法就是: 在组件的 constructor 方法中使用 bind 。

constructor(props) {
  super(props)
  this.update = this.update.bind(this)
}
update(e) {
  this.props.update(e.target.value)
}
render() {
  return <MyInput onChange={this.update} />
}

同时,在JSX中,任何包含子元素(child elements)的组件, shallowEqual 检查总会返回false。

请谨记:纯组件忽略重新渲染时,不仅会影响它本身,而且会影响它的说有子元素,所以,使用PureComponent的最佳情况就是展示组件,它既没有子组件,也没有依赖应用的全局状态。

三、总结

事实上,如果你已经意识到 shallowEqual JS References 的特性,过渡到PureComponent是相当容易的。正常情况下,迁移的方式非常简单,就像改变组件继承的基类,从

class MyComponent extends Component {...}

class MyComponent extends PureComponent {...}

这样不仅能平滑过渡,甚至可以提升性能。所以,我极力推荐所有人在开发应用中使用PureComponent。

四、注意

在纯组件有子组件的时候,所有基于 this.context 改变的子组件,在 this.context 改变时, 将不会重新渲染 ,除非在父组件(Parent ParentComponent)中声明 contextTypes 。

本文翻译至habrahabr。

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

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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
微信小程序自定义底部弹出框
Nov 16 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
弘扬民族精神演讲稿
2014/05/07 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
2014年国庆标语
2014/06/30 职场文书
办理房产过户的委托书
2014/09/14 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript