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

本文主要是介绍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>);
}