返回
用一把钥匙打开 React Hooks 之门：useMemo 和 useCallback 的异同
前端
2023-09-16 08:31:06
浅析 useMemo 和 useCallback 的共性
useMemo 和 useCallback 都是 React Hooks，都是通过缓存数据或函数来避免不必要的重新计算，从而提升组件的性能。它们都需要传递一个依赖数组，只有当依赖项发生改变时才会更新缓存的数据或函数。这有助于减少组件的重新渲染次数，因为只有当依赖项发生改变时，组件才会重新计算并更新其状态。
剖析 useMemo 和 useCallback 的差异
尽管 useMemo 和 useCallback 都有助于优化组件的性能，但它们在使用场景上存在一些关键差异。
useMemo
- 用法：useMemo(factory, deps)
- 目的：缓存一个函数的返回值，只有当依赖项 deps 发生改变时才会重新计算该值。
- 应用场景：当一个函数的计算结果很昂贵，并且在组件的不同渲染之间保持不变时，就可以使用 useMemo 来缓存该函数的返回值。这有助于避免不必要的重新计算，从而提升组件的性能。
useCallback
- 用法：useCallback(callback, deps)
- 目的：缓存一个函数，只有当依赖项 deps 发生改变时才会重新创建该函数。
- 应用场景：当一个函数需要在组件的不同渲染之间保持引用一致性时，就可以使用 useCallback 来缓存该函数。这有助于避免在组件重新渲染时重新创建该函数，从而提升组件的性能。
举一反三，融会贯通
为了更好地理解 useMemo 和 useCallback 的用法，让我们来看两个具体的例子。
示例 1：使用 useMemo 缓存一个昂贵的函数计算结果
const memoizedValue = useMemo(() => {
// 计算一个昂贵的函数
return computeExpensiveValue();
}, [/* 依赖项数组 */]);
在这个示例中，我们使用 useMemo 来缓存一个昂贵的函数计算结果。函数 computeExpensiveValue() 计算一个非常复杂的值，并且该计算过程非常耗时。通过使用 useMemo，我们可以避免在组件的不同渲染之间重新计算该值，从而提升组件的性能。
示例 2：使用 useCallback 缓存一个函数引用
const memoizedCallback = useCallback(() => {
// 执行一些操作
}, [/* 依赖项数组 */]);
在这个示例中，我们使用 useCallback 来缓存一个函数引用。函数 memoizedCallback 在组件的不同渲染之间保持引用一致性。这有助于避免在组件重新渲染时重新创建该函数，从而提升组件的性能。
总结：游刃有余，用好 useMemo 和 useCallback
useMemo 和 useCallback 是 React Hooks 中强大的工具，可以帮助你优化组件的性能。通过理解它们的用法和区别，你可以更熟练地使用它们来提升应用的性能。
