1. useMemo
-
用途:
useMemo
用于缓存计算结果。它接受一个函数和依赖项数组,只有当依赖项发生变化时,才会重新计算该函数的返回值。否则,它会返回缓存的值。 -
返回值:
useMemo
返回的是函数执行后的结果。 -
使用场景:
-
当一个计算量大的函数在每次渲染时都被调用,而计算结果在依赖项没有改变的情况下是相同的时,可以使用
useMemo
来避免重复计算,从而提高性能。 -
例如,在渲染列表时,计算过滤后的列表或排序后的数据可以使用
useMemo
来缓存结果。
-
javascript复制代码const filteredData = useMemo(() => {return data.filter(item => item.active); }, [data]);
2. useCallback
-
用途:
useCallback
用于缓存函数引用。它接受一个函数和依赖项数组,只有当依赖项发生变化时,才会返回一个新的函数引用。否则,它会返回缓存的函数引用。 -
返回值:
useCallback
返回的是函数本身。 -
使用场景:
-
当一个函数被传递给子组件,或者作为依赖项传递给
useEffect
、useMemo
、useContext
等 Hook 时,避免因函数重新创建导致子组件不必要的重新渲染,可以使用useCallback
。 -
例如,在子组件依赖于父组件传递的回调函数时,使用
useCallback
可以确保子组件只在必要时重新渲染。
-
javascript复制代码const handleClick = useCallback(() => {console.log('Button clicked'); }, [dependency]);
总结
-
useMemo
是为了优化计算,避免不必要的重复计算。 -
useCallback
是为了优化函数,避免不必要的函数重新创建,减少子组件的重新渲染