React 18 中 useCallback 和 useMemo 的区别

React 18 中 useCallback 和 useMemo 的区别

useCallback 和 useMemo 都是 React 18 中的性能优化 Hook，但它们有不同的用途：

useCallback

作用：记忆化函数，避免函数在每次渲染时都重新创建。

使用场景：

• 当需要将函数作为 prop 传递给子组件时
• 当函数被用作其他 Hook 的依赖项时

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], // 依赖项数组
);

useMemo

作用：记忆化计算结果，避免在每次渲染时进行昂贵的计算。

使用场景：

• 计算成本高的操作
• 需要保持引用相等的对象或数组

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b], // 依赖项数组
);

主要区别

特性	useCallback	useMemo
返回值	返回记忆化的函数	返回记忆化的值
优化目标	函数引用相等性	计算结果缓存
等价写法	useMemo(() => fn, deps)	useCallback(fn, deps) 不适用

何时使用

• 使用 useCallback 当你想避免子组件因函数 prop 变化而不必要的重新渲染
• 使用 useMemo 当你想避免在每次渲染时重复执行复杂计算

React 18 中的变化

在 React 18 的并发模式下，这些 Hook 的行为保持不变，但在严格模式下（开发环境），React 会故意多次调用你的组件函数来帮助发现副作用问题，这可能会让这些优化看起来"失效"，但实际上在生产环境中它们会正常工作。

记住：不要过早优化，只有在确实遇到性能问题时才使用这些 Hook。