详解在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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
javascript中的继承实例代码
Apr 27 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
Vue中使用vux的配置详解
May 05 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
js正则匹配多个全部数据问题
Dec 20 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
微信小程序自定义底部弹出框
Nov 16 #Javascript
You might like
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
JS实现自定义弹窗功能
2018/08/08 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python爬虫之遍历单个域名
2019/11/20 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
办理护照介绍信
2014/01/16 职场文书
《白鹅》教学反思
2014/04/13 职场文书
霸气队列口号
2014/06/18 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
齐云山导游词
2015/02/06 职场文书
初中体育教学随笔
2015/08/15 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis