react18【系列实用教程】memo —— 缓存组件 （2024最新版）

memo 的语法

如上图所示，在react中，当父组件重新渲染时，子组件也会重新渲染，即便子组件无任何变化，通过 memo 可以实现对组件的缓存，即当子组件无变化时，不再重新渲染子组件，核心代码如下：

import { memo } from "react";

const MemoChild2 = memo(Child2);

export default MemoChild2;

将需要缓存的组件作为 memo 函数的参数传入，并将 memo 函数的返回值对外导出即可。

不适用的情况

memo() 函数的本质是通过校验Props中数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。

所以，当父组件向子组件传递了对象/数组/函数等引用类型的数据时，即便给子组件添加了 memo ，依然会重新渲染，具体演示范例和解决方案详见 useMemo 和 useCallback 的使用教程。

完整范例代码

src/page/Index/Father.jsx

import { useState } from "react";
import Child1 from "./Child1.jsx";
import Child2 from "./Child2.jsx";

export default function Father() {
  console.log("渲染父组件");

  const [num, setNum] = useState(0);

  function increase() {
    setNum(num + 1);
  }

  return (
    <div style={{ border: "1px solid", padding: "10px" }}>
      <h1>父组件</h1>
      <p>num的值为：{num}</p>
      <button onClick={increase}>+1</button>
      <Child1 />
      <Child2 />
    </div>
  );
}

src/page/Index/Child1.jsx

function Child1() {
  console.log("渲染子组件1");

  return (
    <div style={{ border: "1px solid", padding: "10px", margin: "10px" }}>
      <h1>子组件1</h1>
    </div>
  );
}

export default Child1;

src/page/Index/Child2.jsx

import { memo } from "react";

function Child2() {
  console.log("渲染子组件2");

  return (
    <div style={{ border: "1px solid", padding: "10px", margin: "10px" }}>
      <h1>子组件2（添加了 memo 缓存）</h1>
    </div>
  );
}

const MemoChild2 = memo(Child2);

export default MemoChild2;