【React篇】useMemo和useCallback的区别

useMemo 和 useCallback 是 React Hooks 中的两个常用函数，它们主要用于优化性能。尽管它们有一些相似之处，但它们的用途和行为有所不同。

1. useMemo:
   useMemo 用于在组件渲染时根据提供的依赖项“记忆”一个值。这意味着如果依赖项没有改变，useMemo 将返回以前缓存的值，而不是重新计算新值。这有助于避免不必要的计算，从而提高性能。

语法：

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

在这个例子中，computeExpensiveValue(a, b) 函数仅在 a 或 b 发生变化时被调用，否则将返回缓存的值。

2. useCallback:
   useCallback 用于将函数包装在一个记忆函数中，以避免不必要的重新渲染。它接受两个参数：一个函数和一个依赖项数组。当依赖项发生变化时，useCallback 会返回一个新的函数实例；否则，它会返回上一次的函数实例。

语法：

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

在这个例子中，doSomething(a, b) 函数仅在 a 或 b 发生变化时被调用，否则将使用上一次的函数实例。这对于传递给子组件的事件处理程序和回调函数特别有用，因为它们通常不应该在每次渲染时都创建新的实例。

总结：

useMemo 主要用于优化昂贵的计算值，通过在依赖项不变时返回缓存的值。

• useCallback 主要用于优化函数组件中的函数，通过在依赖项不变时返回上一次的函数实例，以避免不必要的重新渲染。