当父组件向子组件传递了函数，也会引发 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> ); }
