React Hooks 的 useMemo 与 useCallback 优化原理与实现机制

描述
useMemo 和 useCallback 是 React Hooks 中用于性能优化的两个关键 API。它们通过缓存计算结果或函数引用，避免组件在每次渲染时重复执行昂贵的计算或创建新的函数，从而减少不必要的渲染和计算开销。理解它们的实现原理有助于在开发中更精确地应用性能优化。

解题过程循序渐进讲解

第一步：问题背景与核心目标
在 React 函数组件中，每次渲染都会重新执行整个函数体。如果组件内部有复杂计算（如数组过滤、数据转换）或事件处理函数，每次渲染都重新计算/创建会导致性能损耗，尤其是当这些计算依赖不变的数据时。useMemo 和 useCallback 的目标是缓存这些结果，仅当依赖项发生变化时才重新计算/创建。

第二步：useMemo 的基本使用与原理

1. 用法：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

   • 第一个参数是工厂函数，返回需要缓存的值。
   • 第二个参数是依赖数组，只有依赖项变化时才会重新执行工厂函数。

2. 内部实现机制（简化版原理）：

   • React 在组件 fiber 节点上维护一个 memorizedState 链表，用于存储所有 Hook 的状态。
   • useMemo 在链表节点中存储一个结构：{ memorizedState: 缓存值, deps: 依赖数组 }。
   • 每次组件渲染时，React 会遍历 Hook 链表，检查当前 useMemo 节点的依赖数组是否变化（通过 Object.is 浅比较每个依赖项）。
   • 如果依赖未变，直接返回链表节点中存储的缓存值；如果依赖变化，则执行工厂函数，将新结果存入链表节点并返回。

3. 关键点：

   • 缓存的是“值”，可以是任意类型（对象、数组、原始值等）。
   • 如果依赖数组为空 []，则只计算一次，类似 class 组件的实例属性。
   • 如果省略依赖数组，每次渲染都会重新计算，失去优化意义。

第三步：useCallback 的基本使用与原理

1. 用法：const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

   • 第一个参数是需要缓存的函数。
   • 第二个参数是依赖数组，只有依赖项变化时才返回新函数。

2. 内部实现机制：

   • useCallback 本质上是 useMemo 的特例。React 源码中，useCallback 实现为：

     function useCallback(callback, deps) {
       return useMemo(() => callback, deps);
     }
     

   • 也就是说，useCallback 缓存的是函数本身，而不是函数执行结果。当依赖不变时，返回上一次渲染时创建的函数引用。

3. 关键点：

   • 缓存的是“函数引用”，常用于避免子组件因 props 中函数引用变化而重新渲染（配合 React.memo）。
   • 如果函数内部依赖了组件状态或 props，必须正确声明依赖项，否则会使用过期闭包。

第四步：依赖数组的精细控制

1. 依赖比较逻辑：React 使用 Object.is（类似 ===，但处理了 NaN 和 ±0）比较每个依赖项的前后值。
2. 依赖项选择原则：
   • 必须包含工厂函数/函数内部引用的所有“动态值”（如 state、props、上下文变量）。
   • 如果依赖是引用类型（如对象/数组），需确保其稳定性（如通过 useMemo 缓存对象，或将依赖拆解为原始值）。
3. 常见陷阱：
   • 依赖数组声明不全，导致使用过期值。
   • 依赖数组声明过多（如内联对象），反而导致频繁重新计算。

第五步：源码级实现流程（简化）

1. 挂载阶段（首次渲染）：
   • 执行工厂函数（useMemo）或保存函数（useCallback），将结果和依赖数组存入 Hook 链表节点。
2. 更新阶段（后续渲染）：
   • 从链表节点中取出上一次的依赖数组（prevDeps）和缓存值（prevValue）。
   • 调用 areHookInputsEqual(prevDeps, nextDeps) 比较依赖（内部用 Object.is 遍历比较）。
   • 如果依赖相等，返回 prevValue；否则重新计算/保存新值，更新链表节点。
3. 性能开销：依赖比较的时间复杂度为 O(n)（n 为依赖数量），但通常 n 很小，远低于重复计算开销。

第六步：优化场景与注意事项

1. 适用场景：
   • useMemo：复杂计算、大列表映射、组件内派生状态。
   • useCallback：函数作为子组件 props 或 useEffect 依赖。
2. 不适用场景：
   • 计算非常简单（如数字相加），缓存开销可能超过重新计算。
   • 函数无需跨渲染保持引用（如只在 useEffect 内使用）。
3. 过度优化警告：滥用会导致代码复杂度增加，且缓存本身占用内存。应结合性能分析工具（如 React DevTools Profiler）定位瓶颈。

总结
useMemo 和 useCallback 通过依赖数组的浅比较，决定是否复用上一次缓存的值或函数引用。它们基于 React Hook 的链表存储结构实现，是函数组件中细粒度性能优化的核心工具，正确使用可有效减少不必要的渲染和计算。