useMemo和useCallback到底有什么区别

程序员阿然2023-11-18 14:20

不知道大家在工作中有没有用到 useMemo 和 useCallback 这两个钩子，笔者总是忘记这两者的区别，现在写一篇记录彻底搞懂这两个 Hook 的区别。

useMemo 和 useCallback 它们都用于优化性能，它们主要是用途有所不同。

useMemo

useMemo 用于记忆一个计算值。当你有一个性能消耗比较大的计算操作，并且你不希望在每次组件渲染时都重新计算它时，你可以使用 useMemo。这个钩子只有在其依赖项发生变化时才会重新计算记忆值。

jsx 复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个例子中，computeExpensiveValue 只有在 a 或 b 改变时才会重新执行。如果不用useMemo 钩子，就会每次在组件渲染时计算。造成性能浪费。

useCallback

useCallback 用于记忆一个函数实例。主要应用于将函数作为 props 传递给子组件的场景，特别是当这些子组件使用了 React.memo 或 shouldComponentUpdate 时。如果你不使用 useCallback，那么每次父组件渲染时都会创建一个新的函数实例，即使这个函数的实际代码并没有改变。此时，就会导致子组件也会重新渲染。

jsx 复制代码

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

在这个例子中，只有当 a 或 b 改变时，函数 doSomething 的实例才会改变。

主要区别

用途：useMemo 用于缓存计算结果，useCallback 用于缓存函数实例。
返回值 ：useMemo 返回的是函数执行的结果，useCallback 返回的是函数本身。
使用场景 ：
- 使用 useMemo 当你需要避免在每次渲染时都进行昂贵的计算。
- 使用 useCallback 当你需要将相同的回调函数传递给优化过的子组件，以避免不必要的渲染。

在实际应用中，应该避免过度使用这些钩子，因为不恰当的使用可能会导致性能问题，而不是优化。例如，过度使用 useMemo 和 useCallback 可能会导致内存占用增加，因为记忆的值和函数实例需要被存储在内存中。