• 128548

    文章

  • 807

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

你的React组件还能跑得再快一点

服了这份高薪指南,涨多少你说了算>>

 写在前面

React 提供的虚拟 DOM 和高效的 Diff 算法的完美搭配,实现了对 DOM 最小粒度的更新。在大多数情况下,React 对 DOM 的渲染效率可以满足我们的开发需求。但是个别复杂业务场景下,性能问题在所难免,我们需要采取一些措施来提升性能,其中 React 组件的渲染性能优化很重要的一点就是避免不必要的渲染。

render 做了什么事情

  • Diffing

React 将 render 函数返回的虚拟 DOM 树与老的进行比较,从而确定 DOM 要不要更新、怎么更新。尽管React使用高度优化的算法进行 diff ,但是这个过程仍然会损耗性能。比方说在 DOM 树很大的说话,遍历两棵树进行各种比对还是相当耗性能的,特别是在顶层 setState 一个微小的修改,默认会去遍历整棵树,然而 JQuery 一行代码就可以搞定。

对比可能挫一点的手动操作 DOM,diff 上的性能损耗让 React 赢不了。换句话说 React 提供了一套方便的 DOM 更新机制,非常方便性能也 OK。

  • Reconciliation

根据 diff 的结果来更新 DOM 树,来挂载或卸载DOM节点,同样会损耗性能,这部分不做过多阐述,感兴趣的同学可以移步文档 reconciliation 。

什么时候 render 会被调用

  • 组件挂载的时候

React 组件构建并将 DOM 元素插入页面的过程称为挂载。

  • setState 方法被调用的时候

但是执行 setState 的时候一定会重新渲染吗?答案是不一定。当 setState 传入 null 的时候,并不会触发 render ,不信的同学可以试一下下面的 demo

  
  1. class App extends React.Component { 
  2.   state = { 
  3.     a: 1 
  4.   }; 
  5.  
  6.   render() { 
  7.     console.log("render"); 
  8.     return ( 
  9.       <> 
  10.         <p>{this.state.a}</p> 
  11.         <button 
  12.           onClick={() => { 
  13.             this.setState({ a: 1 }); // 这里并没有改变 a 的值 
  14.           }} 
  15.         > 
  16.           Click me 
  17.         </button> 
  18.         <button onClick={() => this.setState(null)}>setState null</button> 
  19.         <Child /> 
  20.       </> 
  21.     ); 
  22.   } 
  • 父组件重新渲染

只要父组件重新渲染了,即使传入子组件的 props 未发生变化,那么子组件也会重新渲染。

我们对上面的 demo 进行稍微的修改,可以看出当点击按钮的时候, Child 组件的 props 并没有发生变化,但是也触发了 render 方法。

  
  1. const Child = () => { 
  2.   console.log("child render"); 
  3.   return <div>child</div>; 
  4. }; 
  5.  
  6. class App extends React.Component { 
  7.   state = { 
  8.     a: 1 
  9.   }; 
  10.  
  11.   render() { 
  12.     console.log("render"); 
  13.     return ( 
  14.       <> 
  15.         <p>{this.state.a}</p> 
  16.         <button 
  17.           onClick={() => { 
  18.             this.setState({ a: 1 }); 
  19.           }} 
  20.         > 
  21.           Click me 
  22.         </button> 
  23.         <button onClick={() => this.setState(null)}>setState null</button> 
  24.         <Child /> 
  25.       </> 
  26.     ); 
  27.   } 

我们能做什么?

上文描述的 React 组件渲染机制其实是一种较好的做法,很好地避免了在每一次状态更新之后,需要去手动执行重新渲染的相关操作。鱼和熊掌不可兼得,带来方便的同时也会存在一些问题,当子组件过多或者组件的层级嵌套过深时,因为反反复复重新渲染状态没有改变的组件,可能会增加渲染时间又会影响用户体验,此时就需要对 React 的 render 进行优化。

上面说了不必要的 render 会带来性能问题,因此我们的主要优化思路就是减少不必要的 render。

在 React 类组件中,利用 shouldComponentUpdate 或者 PureComponent 来减少因为父组件更新而触发子组件的render,从而达到目的。

shouldComponentUpdate 来决定是否组件是否重新渲染,如果不希望组件重新渲染,返回 false 即可。

你真的了解 PureComponent 吗?

在 React 中 PureComponet 的源码为

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

看函数名就能够理解,PureComponet 通过对 props 和 state的浅比较结果来实现 shouldComponentUpdate,当对象包含复杂的数据结构时,可能就不灵了,对象深层的数据已改变却没有触发 render。

看到这里,顺便看一下 shallowEqual 是如何实现的。

  
  1. const hasOwnProperty = Object.prototype.hasOwnProperty; 
  2.  
  3. /** 
  4.  * is 方法来判断两个值是否是相等的值,为何这么写可以移步 MDN 的文档,本文不做过多的阐述 
  5.  * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is 
  6.  */ 
  7. function is(x: mixed, y: mixed): boolean { 
  8.   if (x === y) { 
  9.     return x !== 0 || y !== 0 || 1 / x === 1 / y; 
  10.   } else { 
  11.     return x !== x && y !== y; 
  12.   } 
  13.  
  14. /** 
  15.  *  
  16.  */ 
  17. function shallowEqual(objA: mixed, objB: mixed): boolean { 
  18.   // 首先对基本类型进行比较 
  19.   if (is(objA, objB)) { 
  20.     return true
  21.   } 
  22.  
  23.   if (typeof objA !== 'object' || objA === null || 
  24.       typeof objB !== 'object' || objB === null) { 
  25.     return false
  26.   } 
  27.  
  28.   const keysA = Object.keys(objA); 
  29.   const keysB = Object.keys(objB); 
  30.  
  31.   // 长度不相等直接返回false 
  32.   if (keysA.length !== keysB.length) { 
  33.     return false
  34.   } 
  35.  
  36.   // key相等的情况下,再去循环比较 
  37.   for (let i = 0; i < keysA.length; i++) { 
  38.     if ( 
  39.       !hasOwnProperty.call(objB, keysA[i]) || 
  40.       !is(objA[keysA[i]], objB[keysA[i]]) 
  41.     ) { 
  42.       return false
  43.     } 
  44.   } 
  45.  
  46.   return true

函数组件怎么办

那么现在问题来了,函数组件并没有 shouldComponentUpdate 这个生命周期,有没有什么办法可以避免不必要的 render。

利用高阶组件

除了把函数组件转成类组件,还可以利用高阶组件,封装一个类似 PureComponet 的功能

  
  1. const shouldComponentUpdate = arePropsEqual => BaseComponent => { 
  2.   class ShouldComponentUpdate extends React.Component { 
  3.     shouldComponentUpdate(nextProps) { 
  4.       return arePropsEqual(this.props, nextProps) 
  5.     } 
  6.  
  7.     render() { 
  8.       return <BaseComponent {...this.props} /> 
  9.     } 
  10.   } 
  11.  
  12.   ShouldComponentUpdate.displayName = `Pure(${BaseComponent.displayName})`; 
  13.   return ShouldComponentUpdate; 
  14.  
  15. const Pure = BaseComponent => { 
  16.   const hoc = shouldComponentUpdate( 
  17.       (props, nextProps) => !shallowEqual(props, nextProps) 
  18.   ) 
  19.  
  20.   return hoc(BaseComponent); 

使用 Pure 高阶组件的时候,只需要对我们的子组件进行装饰即可。

  
  1. import React from 'react'
  2.  
  3. const Child = (props) => <div>{props.name}</div>; 
  4.  
  5. export default Pure(Child); 

使用 React.memo

React.memo 是 React 16.6 新的一个API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent 十分类似,与 PureComponent 不同的是, React.memo 只能用于函数组件

  • 基本用法
  
  1. import { memo } from 'react'
  2.  
  3. function Button(props) { 
  4.   // Component code 
  5.  
  6. export default memo(Button); 
  • 高级用法

默认情况下其只会对 props 做浅层对比,遇到层级比较深的复杂对象时,表示力不从心了。对于特定的业务场景,可能需要类似 shouldComponentUpdate 这样的 API,这时通过 memo 的第二个参数来实现。

  
  1. function arePropsEqual(prevProps, nextProps) { 
  2.   // your code 
  3.   return prevProps === nextProps; 
  4.  
  5. export default memo(Button, arePropsEqual); 

注意:

与 shouldComponentUpdate 不同的是, arePropsEqual 返回 true 时,不会触发 render,如果返回 false ,则会。而 shouldComponentUpdate 刚好与其相反。

合理拆分组件

微服务的核心思想是:以更轻、更小的粒度来纵向拆分应用,各个小应用能够独立选择技术、发展、部署。我们在开发组件的过程中也能用到类似的思想。试想当一个整个页面只有一个组件时,无论哪处改动都会触发整个页面的重新渲染,去 diffing 和 reconciliation 整个页面。在对组件进行拆分之后,render 的粒度更加精细,性能也能得到一定的提升。

总结

本文主要介绍了如何减少不必要的 render 来提升 React 的性能。在实际开发过程中,前端性能问题可能并不常见,随着业务的复杂度增加,遇到性能问题的概率也会随之增加。

  • 减少 render 的次数 类组件可以使用 shouldComponentUpdate 或 PureComponent,函数组件可以利用高级组件的特性或者 React.memo
  • 对组件进行合理的拆分

在摸索这些解决方案的同时,我们能够学习到诸多经典的编程思想,从而更加合理的运用框架、技术解决业务问题。

【编辑推荐】



695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客