详解在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代码
Aug 13 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
js中replace的用法总结
Dec 27 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
node中的cookie的具体使用
Sep 13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
在PHP中使用灵巧的体系结构
2006/10/09 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
asp批量修改记录的代码
2008/06/25 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
简单的python后台管理程序
2017/04/13 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Python自省及反射原理实例详解
2020/07/06 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
中专自我鉴定
2014/02/05 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
总结Python常用的魔法方法
2021/05/25 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电