【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("何かをする"), []);