react18【系列实用教程】useMemo —— 缓存数据 （2024最新版）

为什么添加了 memo ，子组件2依然重新渲染了呢？
因为父组件向子组件2传递了引用类型的数据

  const userInfo = {
    name: "朝阳",
  };

<Child2 userInfo={userInfo} />

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

每次父组件重新渲染时，引用类型的数据 userInfo 的内存地址都会重新生成，导致子组件重新渲染。

注意事项：若 userInfo 是用 useState 声明的响应式变量，则内存地址不会重新生成，所以不会引发子组件的重新渲染。

  // 不会引发添加了 memo 的子组件重新渲染
  const [userInfo] = useState({ name: "朝阳" });

useMemo 的使用场景

父组件向子组件传递了引用类型的数据，但仍想缓存子组件，则需使用 useMemo

useMemo 的语法

• 第1个参数：返回目标数据的函数
• 第2个参数：由依赖项构成的数组，和 useEffect 类似，当依赖项发生改变时，也会触发 useMemo 内第一个参数的处理函数执行，引发子组件重新渲染！
• 返回：被缓存的目标数据

import { useMemo } from "react";

 const userInfo = useMemo(() => {
   return { name: "朝阳" };
 }, []);

完整范例代码

src/page/Index/Father.jsx

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

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

  const userInfo = useMemo(() => {
    console.log("执行 useMemo");
    return { name: "朝阳" };
  }, []);

  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 userInfo={userInfo} />
    </div>
  );
}