第 006 期 React 运行时性能优化之减少渲染组件的次数

减少组件的渲染次数，能提升 React App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

优化写法

1. 组件 Render 时，避免 state， props 没变的子组件 Render

组件 Render 会导致的其子组件 Render，即使子组件的 state， props 没变。

子组件用 PureComponent 和 React.memo 可以避免这种情况下的 Render。类组件用 PureComponent，函数组件用React.memo。示例:

// 类组件
class class ClassComp extends React.PureComponent{}

// 函数组件
function FnComp () {}
React.memo(FnComp)

2. 函数组件 Render 时，避免变化的函数属性值，导致子组件 Render

函数组件中的函数，每运行一次，都会生成一个新的函数。如果这个函数是某个子组件的属性，函数 Render 一次，都会导致子组件的 Render。

用 useCallback 包裹函数，可以避免这种情况下不必要的 Render。

const handleClick = useCallback(() => ..., [])
return (
  <ChildComp onClick={handleClick}>
)

3. 组件 Render 时，属性值避免用箭头函数值，导致子组件 Render

如果子组件的属性值是个箭头函数，父组件每次 Render，箭头函数都是新的，会导致子组件的 Render。

属性值用实例方法，就能避免这种情况。例如:

handleClick = () => {...},
render() {
  return (
    <ChildComp onClick={handleClick}>
  )
}

Render Props 也出现这样的问题。如:

<Mouse>
  {mouse => (
    <ChildComp pos={mouse}>
  )}
</Mouse>

解决方案也是将其改成实例方法：

<Mouse>
  {this.renderChild}
</Mouse>

4. 避免 Prop Drilling 导致的中间组件的 Render

Prop drilling 指将外层组件的 state 通过 props 一层层传下去，传递到层级很深的子组件的过程。外层组件的 state 发生变化，中间组件都会 Render。

层级很深的子组件可以直接取到值，不需要中间属性的传递，就能避免中间属性的 Render。用 Context API 或 Redux，MobX 等状态管理工具可以让子组件直接取到值。用 Context API 的示例:

// 父组件提供数据
<ThemeContext.Provider value={{ theme: this.state.theme }}>
  <Comp1>
    <Comp2>
      <Comp3>
        <ThemeContext.Consumer>
          {({theme}) => {
            // 子组件拿值
          }}
        </ThemeContext.Consumer>
      </Comp3>
    </Comp2>
  </Comp1>
</ThemeContext.Provider>

参考文档

• React 性能优化 | 包括原理、技巧、Demo、工具使用