详解在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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
理解javascript中的with关键字
Feb 15 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
php多任务程序实例解析
2014/07/19 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
PHP重载基础知识回顾
2020/09/10 PHP
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
python 队列详解及实例代码
2016/10/18 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
业务内勤岗位职责
2014/04/30 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
村官2015年度工作总结
2015/10/14 职场文书
创业计划书之寿司
2019/07/19 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python