面试官：useCallback，useMemo使用后性能一定好吗？

适用/不适用场景

在 React 中，useCallback 和 useMemo 是用于性能优化的 Hook，但并不需要对所有的变量和函数都进行包裹。它们的主要用途是避免因为组件的重新渲染而产生不必要的开销。以下是它们的具体使用场景和注意事项：

1. useCallback

• 作用 ：useCallback 会返回一个记忆化的回调函数，只有在依赖项发生变化时才会重新生成该函数。通常用在将函数作为子组件的属性传递的情况，以避免不必要的子组件重渲染。
• 适用场景 ：
  • 当一个函数被传递给子组件且子组件依赖这个函数时（例如事件处理函数）。
  • 函数内部的依赖项变化较少，且对性能敏感。
• 不适用场景 ：
  • 仅仅在组件内部使用的函数，不需要 useCallback。
  • 没有频繁重渲染的情况，useCallback的效果就不明显。

示例：

const handleClick = useCallback(() => {
  // 处理点击事件的逻辑
}, [dependency]); // 只有在依赖项变化时才重新生成

2. useMemo

• 作用 ：useMemo 会返回一个记忆化的值，只有在依赖项变化时才会重新计算该值。通常用于计算开销较大或依赖其他值的计算结果。
• 适用场景 ：
  • 当计算过程非常耗时（例如复杂的计算、数据处理）。
  • 当计算结果依赖多个状态或属性，并且这些状态的变化频率较低。
• 不适用场景 ：
  • 简单的计算和基本类型变量，不会因为多次计算而影响性能时。
  • 状态变化频繁的计算场景中，useMemo可能会带来额外的维护成本。

示例：

const computedValue = useMemo(() => {
  return heavyCalculationFunction(dependency);
}, [dependency]); // 只有在依赖项变化时才重新计算

结论

useCallback 和 useMemo 是为性能优化设计的工具，只有在存在性能瓶颈或有明显重渲染需求时才使用。过度使用它们可能导致代码复杂度提升、性能反而下降。所以在实际项目中，根据性能检测工具找到需要优化的地方，再使用这两个 Hook。

底层解释

要明白这两个 Hook 的工作原理，首先要理解 JavaScript 中的引用类型 和 React 渲染机制 的一些基本概念。

1. React 重新渲染的触发机制

在 React 中，组件的重新渲染通常会因为以下原因发生：

• 父组件重新渲染 ：子组件会默认重新渲染，除非通过 React.memo、useCallback、useMemo 等方法优化。
• 状态或属性改变 ：当组件的 state 或 props 改变时，React 会重新渲染这个组件。
• 函数和对象的重新创建：每次渲染时，函数和对象（包括数组）等引用类型会在内存中创建新的实例，即使内容相同，内存地址不同，React 会认为这些是新的引用。

函数和对象的引用问题

在 JavaScript 中，函数和对象都是引用类型。即使内容完全相同，如果函数在重新渲染时被重新创建，那么它的内存地址也会不同。React 的虚拟 DOM 检测到这一变化后，会将其视为"新"属性，导致相关子组件重新渲染。

举个例子：

function ParentComponent() {
  const handleClick = () => {
    console.log("Clicked");
  };

  return <ChildComponent onClick={handleClick} />;
}

在这个例子中，每次 ParentComponent 重新渲染时，handleClick 都会重新创建。由于 ChildComponent 的 onClick 属性指向的是一个"新"函数，React 会默认重新渲染 ChildComponent。

2. useCallback 和 useMemo 的底层工作机制

useCallback 和 useMemo 通过缓存函数和计算结果来避免引用类型的重新创建，从而避免不必要的渲染。

useCallback 的底层原理

useCallback 在首次渲染时会将函数缓存起来，并在随后的渲染中复用这份缓存。只有当依赖项发生变化时，useCallback 才会更新缓存的函数。

从底层来看，useCallback 的实现类似于：

function useCallback(callback, deps) {
  const lastCallback = useRef();
  const lastDeps = useRef();

  if (!areDepsEqual(deps, lastDeps.current)) {
    lastCallback.current = callback;
    lastDeps.current = deps;
  }

  return lastCallback.current;
}

这段伪代码中，useCallback 在第一次调用时会将 callback 存储在 lastCallback 中，并保存依赖项 deps。当 deps 不发生变化时，useCallback 会返回同一个 callback，避免了函数重建带来的性能开销。

useMemo 的底层原理

useMemo 的底层实现也类似，但它缓存的是一个计算结果 而不是函数。只有依赖项发生变化时，useMemo 才会重新计算，否则直接返回缓存的值。

其伪代码类似于：

function useMemo(factory, deps) {
  const lastValue = useRef();
  const lastDeps = useRef();

  if (!areDepsEqual(deps, lastDeps.current)) {
    lastValue.current = factory();
    lastDeps.current = deps;
  }

  return lastValue.current;
}

useMemo 会在依赖项不变的情况下直接返回之前的计算结果，避免重复的计算开销。

3. useCallback 和 useMemo 的作用原理

• 避免引用类型的重建：通过缓存机制保持引用类型（函数、对象等）的地址一致性，减少组件对变化的误判。
• 延迟计算：对于高开销的计算场景，通过缓存和依赖检查机制减少不必要的计算和内存分配。

4. 为什么 useCallback 和 useMemo 并不总是带来性能提升

• 缓存和比较带来的额外开销：React 需要在每次渲染时检查依赖项是否改变，这个对比过程会有一定开销。
• 频繁失效时的开销：如果依赖项频繁变化，缓存经常失效，反而会增加 React 为维护和清理缓存所付出的性能开销。

总结

useCallback 和 useMemo 的设计目的，是在某些场景中通过缓存优化函数和计算结果的重建开销。然而在非必要场景过度使用，可能反而增加性能负担。因此，这两个 Hook 的使用前提是经过性能分析确定存在真正的性能瓶颈。