详解使用React.memo()来优化函数组件的性能

下面是详解使用React.memo()优化函数组件性能的攻略。

React.memo()是什么

React.memo()是一种HOC(High Order Component，高阶组件)，用于优化函数组件性能。类似于PureComponent，React.memo()可以通过浅层对比(props的浅层对比)来避免因为相同props重新渲染函数组件导致的性能问题。
在函数组件中，如果组件渲染的代价比较昂贵，那么可以使用 React.memo()来避免不必要的渲染。

const MyComponent = React.memo(props => {
  /* 组件的具体代码 */
})

如何使用

使用 React.memo() 来包装一个函数组件，并返回一个优化后的函数组件。

const MyComponent = React.memo(props => {
  /* 组件的具体代码 */
})

为什么使用

1. 提高系统性能
2. 减少不必要的渲染

使用示例1

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Button = React.memo(({ onClick, children }) => {
  console.log(`Button - ${children}渲染了！`)
  return <button onClick={onClick}>{children}</button>
})

const App = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
  }

  console.log('App渲染了！')
  return (
    <div>
      <p>点击了{count}次</p>
      <Button onClick={handleClick}>+1</Button>
    </div>
  )
}

const container = document.getElementById('root')
ReactDOM.render(<App />, container)

在控制台看到的日志输出如下：

App渲染了！
Button - +1渲染了！

初始化render了一次，在点击+1按钮后，因为App的state更新了，App就被重新render了。在App的render中，Button的props没有更新，所以只有第一次渲染才会输出Button的“渲染了”日志。这是因为Button函数组件使用了React.memo()，导致如果props没有更新，则Button组件不会被重新渲染。

使用示例2

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Count = ({ value }) => {
  console.log(`Count - ${value}渲染了！`)
  return <h3>{value}</h3>
}

const App = () => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)

  const handleClick1 = () => {
    setCount1(count1 + 1)
  }

  const handleClick2 = () => {
    setCount2(count2 + 1)
  }

  console.log('App渲染了！')
  return (
    <div>
      <button onClick={handleClick1}>count1 + 1</button>
      <button onClick={handleClick2}>count2 + 1</button>
      <Count value={count1} />
      <Count value={count2} />
    </div>
  )
}

const container = document.getElementById('root')
ReactDOM.render(<App />, container)

在控制台看到的日志输出如下：

App渲染了！
Count - 0渲染了！
Count - 0渲染了！

和示例1不同，现在有两个Count组件在渲染了。

在点击Count1加一按钮后，只有Count1会因为props变化而重新渲染，而没有因为Count2改变而重新渲染。
这是因为Count组件没有使用React.memo()，所以在App的render中，Count组件每次都会重新渲染。

如果我们对Count组件使用React.memo()在进行优化：

const Count = React.memo(({ value }) => {
  console.log(`Count - ${value}渲染了！`)
  return <h3>{value}</h3>
})

则在App的render中，只有当Count组件的props变化时才会重新渲染。在此示例中，由于每一个Count的props变化，所以每一个Count都会重新渲染。

这就是使用React.memo()来优化函数组件的性能的完整攻略。