React 中 useCallback 和 useMemo 的区别是什么？

推荐答案

useCallback 和 useMemo 都是 React 提供的用于性能优化的 Hook，但它们的使用场景和作用有所不同。

• useCallback: 用于缓存函数引用，避免在组件重新渲染时创建新的函数实例。它适用于需要将函数作为依赖传递给子组件或 Hook 的情况。

• useMemo: 用于缓存计算结果，避免在组件重新渲染时重复执行复杂的计算。它适用于需要缓存某个值的场景，尤其是当这个值的计算成本较高时。

本题详细解读

useCallback

useCallback 的主要作用是返回一个记忆化的回调函数。它的语法如下：

const memoizedCallback = useCallback(callback, dependencies);

• callback: 需要记忆化的函数。
• dependencies: 依赖项数组，只有当依赖项发生变化时，useCallback 才会返回一个新的函数实例。

使用场景:

• 当需要将函数作为 prop 传递给子组件时，使用 useCallback 可以避免子组件不必要的重新渲染。
• 当函数被用作其他 Hook 的依赖项时，使用 useCallback 可以确保依赖项稳定。

示例:

const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []);

return <button onClick={handleClick}>Click me</button>;

useMemo

useMemo 的主要作用是返回一个记忆化的值。它的语法如下：

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

• computeExpensiveValue: 一个计算函数，返回需要记忆化的值。
• dependencies: 依赖项数组，只有当依赖项发生变化时，useMemo 才会重新计算并返回新的值。

使用场景:

• 当需要缓存某个计算结果时，尤其是当这个计算过程较为复杂或耗时。
• 当某个值的计算依赖于其他状态或 props 时，使用 useMemo 可以避免不必要的重复计算。

示例:

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

return <div>{expensiveValue}</div>;

区别总结

• useCallback: 缓存函数引用，适用于需要传递函数作为依赖的场景。
• useMemo: 缓存计算结果，适用于需要缓存某个值的场景。

两者都依赖于依赖项数组来决定是否需要重新计算或重新创建，但它们的应用场景和返回值的类型不同。