【React】useCallback是什么

useCallback是一个React Hook,用于优化函数组件的性能。它用于防止在每次渲染时重新创建函数。

useCallback()返回了一个缓存的回调函数。
只有依赖数组(=[deps] 存储了回调函数所依赖的元素的数组)的元素发生变化时,才会重新计算缓存的值。

“什么是记忆化…?”

React的记忆化是一种保留计算结果并重复利用的方法。可以将其类比为缓存的概念。因此,以下的表述大致意思相同。

「計算結果が保持された値」=「儲存計算結果的值」
「計算結果を再利用できるように保持する」=「儲存計算結果以便再利用」

可以期望通过记忆化来提高性能,因为不再需要每次都进行计算。

基本句法

useCallback(callbackFunction, [deps]);

如果想要对输出变量名为name的函数使用console.log进行记忆化处理,可以按以下方式操作。

const callback = useCallback(() => console.log(name), [name]);

如果依赖的元素有更新,函数会重新生成。
如果没有依赖的元素,依赖数组为空也是可以的。

const callback = useCallback(() => console.log("何かをする"), []);
广告
将在 10 秒后关闭
bannerAds