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

2023-02-27

this 组件 dom

 写在前面React提供的虚拟DOM和高效的Diff算法的完美搭配，实现了对DOM最小粒度的更新。在大多数情况下，React对DOM的渲染效率可以满足我们的开发需求。但是个别复杂业务场景下，性能问题在所难免，我们需要采取一些措施来提升性能，其中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

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

父组件重新渲染

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

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

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

我们能做什么？

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

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

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

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

你真的了解 PureComponent 吗？

在 React 中 PureComponet 的源码为

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

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

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

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

函数组件怎么办

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

利用高阶组件

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

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

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

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

使用 React.memo

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

基本用法

import { memo } from 'react'; 
 
function Button(props) { 
  // Component code 
} 
 
export default memo(Button); 
1.
2.
3.
4.
5.
6.
7.

高级用法

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

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

注意：

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

合理拆分组件

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