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>
);
}
原文地址:https://blog.csdn.net/weixin_41192489/article/details/138911123
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!