如何利用Memoization提高React性能

//Parent.js
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    console.log("Parent render");
    return (
      
        Increment
        
{this.state.count}
        
      

此示例的完整代码可在 CodeSandbox 上查看。

我们将创建一个 Child 类，该类接受父组件传递的参数并将其显示在 UI 中：

//Child.js
class Child extends React.Component {
  render() {
    console.log("Child render");
    return (
      

        
{this.props.name}
      
    );
  }
}

export default Child;

每当我们点击父组件中的按钮时，count 值都会更改。由于 state 变化了，因此父组件的 render 方法被执行了。

传递给子组件的参数在每次父组件重新渲染时都没有改变，因此子组件不应重新渲染。然而，当我们运行上面的代码并继续递增 count 时，我们得到了以下输出：

Parent render
Child render
Parent render
Child render
Parent render
Child render

你可以在这个 sandbox 中体验上述示例，并查看控制台的输出结果。

从输出中，我们可以看到，当父组件重新渲染时，即使传递给子组件的参数保持不变，子组件也会重新渲染。这将导致子组件的虚拟 DOM 与以前的虚拟 DOM 执行差异检查。由于我们的子组件中没有变更且重新渲染时的所有 props 都没有变，所以真正的 DOM 不会被更新。

真正的 DOM 不会进行不必要地更新对性能确实是有好处，但是我们可以看到，即使子组件中没有实际更改，也会创建新的虚拟 DOM 并执行差异检查。对于小型 React 组件，这种性能消耗可以忽略不计，但对于大型组件，性能影响会很大。为了避免这种重新渲染和虚拟 DOM 的差异检查，我们使用 Memoization。

React 中的 Memoization

在 React 应用的上下文中，Memoization 是一种手段，每当父组件重新渲染时，子组件仅在它所依赖的 props 发生变化时才会重新渲染。如果子组件所依赖的 props 中没有更改，则它不会执行 render 方法，并将返回缓存的结果。由于渲染方法未执行，因此不会有虚拟 DOM 创建和差异检查，从而实现性能的提升。

现在，让我们看看如何在类和函数组件中实现 Memoization，以避免这种不必要的重新渲染。

类组件实现 Memoization

为了在类组件中实现 Memoization，我们将使用 React.PureComponent。React.PureComponent 实现了 shouldComponentUpdate()，它对 state 和 props 进行了浅比较，并且仅在 props 或 state 发生更改时才重新渲染 React 组件。

将子组件更改为如下所示的代码：

//Child.js
class Child extends React.PureComponent { // 这里我们把 React.Component 改成了 React.PureComponent
  render() {
    console.log("Child render");
    return (
      

        
{this.props.name}
      
    );
  }
}

export default Child;

此示例的完整代码显示在这个 sandbox 中。

父组件保持不变。现在，当我们在父组件中增加 count 时，控制台中的输出如下所示：

Parent render
Child render
Parent render
Parent render

对于首次渲染，它同时调用父组件和子组件的 render 方法。

对于每次增加 count 后的重新渲染，仅调用父组件的 render 函数。子组件不会重新渲染。

函数组件实现 Memoization

为了在函数组件中实现 Memoization，我们将使用 React.memo()。React.memo() 是一个高阶组件（HOC），它执行与 PureComponent 类似的工作，来避免不必要的重新渲染。

以下是函数组件的代码：

//Child.js
export function Child(props) {
  console.log("Child render");
  return (
    

      
{props.name}
    
  );
}

export default React.memo(Child); // 这里我们给子组件添加 HOC 实现 Memoization

同时还将父组件转换为了函数组件，如下所示：

//Parent.js
export default function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  console.log("Parent render");
  return (
    

      Increment
      
{count}
      
    
  );
}

此示例的完整代码可以在这个 sandbox 中看到。

现在，当我们递增父组件中的 count 时，以下内容将输出到控制台：

Parent render
Child render
Parent render
Parent render
Parent render

React.memo() 存在的问题

在上面的示例中，我们看到，当我们对子组件使用 React.memo() HOC 时，子组件没有重新渲染，即使父组件重新渲染了。

但是，需要注意的一个小问题是，如果我们将函数作为参数传递给子组件，即使在使用 React.memo() 之后，子组件也会重新渲染。让我们看一个这样的例子。

我们将更改父组件，如下所示。在这里，我们添加了一个处理函数，并作为参数传递给子组件：

//Parent.js
export default function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };

  const handler = () => {
    console.log("handler");    // 这里的 handler 函数将会被传递给子组件
  };

  console.log("Parent render");
  return (
    
      Increment
      
{count}