做企业网站服务器,重庆市建设工程信息网招标代理入渝备案取消,网站开发时间计划表,四川二滩建设咨询有限公司网站1 useCallback
useMemo 和 useCallback 接收的参数都是一样#xff0c;都是在其依赖项发生变化后才执行#xff0c;都是返回缓存的值#xff0c;区别在于 useMemo 返回的是函数运行的结果#xff0c;useCallback 返回的是函数。
当需要使用 useCallback 的情况通常包括以…1 useCallback
useMemo 和 useCallback 接收的参数都是一样都是在其依赖项发生变化后才执行都是返回缓存的值区别在于 useMemo 返回的是函数运行的结果useCallback 返回的是函数。
当需要使用 useCallback 的情况通常包括以下几种情形
1将回调函数作为 prop 传递给子组件在这种情况下使用 useCallback 可以确保子组件在父组件重新渲染时不会不必要地重新渲染。
import React, { useCallback } from react;const ParentComponent () {const handleClick useCallback(() {console.log(Button clicked!);}, []);return ChildComponent onClick{handleClick} /;
};const ChildComponent ({ onClick }) {return button onClick{onClick}Click me/button;
};2优化依赖项变化引起的重新渲染在 useEffect 中使用 useCallback 可以避免不必要的重新执行。
import React, { useState, useEffect, useCallback } from react;const ExampleComponent () {const [count, setCount] useState(0);const handleIncrement useCallback(() {setCount(count 1);}, [count]);useEffect(() {console.log(Count changed:, count);}, [handleIncrement]);return (divpCount: {count}/pbutton onClick{handleIncrement}Increment/button/div);
};3避免不必要的函数创建在需要动态生成函数的场景下使用 useCallback 缓存函数。
import React, { useCallback } from react;const ExampleComponent () {const generateRandomNumber useCallback(() {return Math.floor(Math.random() * 100);}, []);return (divpRandom number: {generateRandomNumber()}/p/div);
};注意 useCallBack不要每个函数都包一下否则就会变成反向优化useCallBack本身就是需要一定性能的 useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。useCallBack你真的知道怎么用吗。
2 useMemo
useMemo 可以在函数组件 render 上下文中同步执行一个函数逻辑这个函数的返回值可以作为一个新的状态缓存起来。
场景一在一些场景下需要在函数组件中进行大量的逻辑计算那么我们不期望每一次函数组件渲染都执行这些复杂的计算逻辑所以就需要在 useMemo 的回调函数中执行这些逻辑然后把得到的产物计算结果缓存起来就可以了。 场景二React 在整个更新流程中diff 起到了决定性的作用比如 Context 中的 provider 通过 diff value 来判断是否更新
缓存计算结果
function Scope(){const style useMemo((){let computedStyle {}// 经过大量的计算return computedStyle},[])return div style{style} /div
}缓存组件,减少子组件 render 次数
function Scope ({ children }){const renderChild useMemo((){ children() },[ children ])return div{ renderChild } /div
}参考
「React 进阶」 React 全部 Hooks 使用大全 包含 React v18 版本
