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

当父组件向子组件传递了函数，也会引发 memo 缓存组件失效，因为函数也是引用类型的数据，父组件重新渲染时，传给子组件的函数的内存地址也会重新生成，引发子组件重新渲染。

  const printNum = () => {
    console.log("打印 num ：", num);
  };

<Child2 printNum={printNum} />

useCallback 的使用场景

父组件向子组件传递了函数，但仍想缓存子组件，则需使用 useCallback

useCallback 的语法

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

import { useCallback } from "react";

const printNum = useCallback(() => {
  console.log("打印 num ：", num);
}, []);

完整范例代码

src/page/Index/Father.jsx

import { useState, useCallback } 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);
  }

  const printNum = useCallback(() => {
    console.log("打印 num ：", num);
  }, []);

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