React.memo 详解：优化 React 组件的渲染性能

2023-11-03 08:20:40

备忘组件及其优势

React.memo 是一个高级组件（HOC），可将组件包装成一个备忘组件。它通过对组件的输入（props）进行浅比较，决定是否需要重新渲染组件。如果输入未发生变化，则备忘组件将跳过重新渲染过程，从而优化性能。

备忘组件具备以下优势：

提高渲染性能：由于备忘组件会跳过不必要的重新渲染，因此可以显著提高组件的渲染性能。
降低内存开销：由于备忘组件无需重新创建组件实例，因此可以降低内存开销。
减少 CPU 开销：由于备忘组件无需重新计算组件状态，因此可以减少 CPU 开销。

React.memo 的工作原理

React.memo 通过比较组件的输入（props）来确定是否需要重新渲染组件。如果输入未发生变化，则备忘组件将跳过重新渲染过程。比较输入时，备忘组件会使用浅比较算法，即仅比较输入对象的引用是否相等。

import React, { memo } from "react";

const MyComponent = memo(({ name }) => {
  console.log("MyComponent 重新渲染");
  return <div>Hello, {name}!</div>;
});

在这个例子中，MyComponent 组件被包装成了一个备忘组件。当组件的输入（name）发生变化时，备忘组件将重新渲染。但是，如果输入未发生变化，则备忘组件将跳过重新渲染过程。

React.memo 的适用场景

备忘组件适用于以下场景：

组件的输入很少发生变化。
组件的渲染开销很大。
组件的渲染结果与输入完全相同。

如何使用 React.memo

要使用 React.memo，您需要导入 memo 函数，然后将组件作为参数传递给它。例如：

import React, { memo } from "react";

const MyComponent = memo(({ name }) => {
  console.log("MyComponent 重新渲染");
  return <div>Hello, {name}!</div>;
});

您也可以使用备忘组件的高阶组件形式：

import React from "react";

const memo = (Component) => {
  return class extends React.Component {
    shouldComponentUpdate(nextProps) {
      return !shallowEqual(this.props, nextProps);
    }

    render() {
      return <Component {...this.props} />;
    }
  };
};

然后，您可以使用备忘组件的高阶组件形式来包装组件：

import React from "react";
import memo from "./memo";

const MyComponent = ({ name }) => {
  console.log("MyComponent 重新渲染");
  return <div>Hello, {name}!</div>;
};

const MemoizedMyComponent = memo(MyComponent);