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

描述
useMemo 和 useCallback 是 React Hooks 中用于性能优化的两个重要 API。它们通过缓存计算结果和函数引用，避免组件重新渲染时不必要的重复计算和子组件无效重渲染。理解其实现机制有助于在开发中正确使用这些优化手段。

知识讲解

1. 问题背景：组件渲染性能瓶颈

• 当组件重新渲染时，内部的计算逻辑和函数声明会重新执行
• 如果计算成本高昂或函数作为 props 传递给子组件，会导致性能问题
• 示例场景：

  function ExpensiveComponent({ items }) {
    // 每次渲染都会重新计算
    const expensiveValue = heavyComputation(items);
  
    // 每次渲染都会创建新函数
    const handleClick = () => { /* ... */ };
  
    return <Child onClick={handleClick} value={expensiveValue} />;
  }
  

2. useMemo 的实现原理

• 缓存机制：使用闭包存储上一次的计算结果和依赖项

• 依赖对比：使用 Object.is 进行依赖项的浅比较

• 实现流程：

  1. 在组件渲染时，检查依赖项是否发生变化
  2. 如果依赖未变，返回缓存的值
  3. 如果依赖变化，重新计算并缓存新值

• 源码级实现思路：

  function useMemo(create, deps) {
    const hook = mountWorkInProgressHook();
  
    // 首次渲染：计算并缓存
    if (hook.memoizedState === undefined) {
      const nextValue = create();
      hook.memoizedState = [nextValue, deps];
      return nextValue;
    }
  
    // 更新阶段：比较依赖
    const [prevValue, prevDeps] = hook.memoizedState;
    if (areHookInputsEqual(deps, prevDeps)) {
      return prevValue; // 依赖未变，返回缓存值
    }
  
    // 依赖变化，重新计算
    const nextValue = create();
    hook.memoizedState = [nextValue, deps];
    return nextValue;
  }
  

3. useCallback 的实现原理

• 本质是语法糖：基于 useMemo 实现，专门用于缓存函数
• 实现机制：

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

• 实际作用：保证函数引用不变，避免子组件因 props 变化而重渲染

4. 依赖项数组的精细控制

• 空数组 []：只在挂载时计算一次，后续永远返回缓存值
• 无依赖项：每次渲染都重新计算（等同于不用 useMemo）
• 具体依赖：只有指定依赖变化时才重新计算

5. 优化效果的实际表现

• useMemo 优化场景：

  function Component({ list }) {
    // 只有 list 变化时才重新计算
    const sortedList = useMemo(() => {
      return list.sort((a, b) => a.value - b.value);
    }, [list]);
  
    return <div>{sortedList.map(item => <span key={item.id}>{item.name}</span>)}</div>;
  }
  

• useCallback 优化场景：

  function Parent() {
    const [count, setCount] = useState(0);
  
    // 保证函数引用稳定，避免 Child 无效重渲染
    const increment = useCallback(() => {
      setCount(c => c + 1);
    }, []);
  
    return (
      <div>
        <Child onIncrement={increment} />
        <span>Count: {count}</span>
      </div>
    );
  }
  
  const Child = React.memo(({ onIncrement }) => {
    // 只有当 onIncrement 引用变化时才重渲染
    return <button onClick={onIncrement}>+</button>;
  });
  

6. 使用注意事项与最佳实践

• 不要过度优化：简单的计算不需要 useMemo
• 确保依赖项完整：避免陈旧的闭包值
• 与 React.memo 配合使用：useCallback 需要子组件用 memo 包装才有效
• 避免在 useMemo 中产生副作用：副作用应该放在 useEffect 中

7. 底层实现细节

• Hook 的存储结构：在 Fiber 节点的 memoizedState 链表中存储缓存值
• 比较算法：使用 Object.is 进行依赖项比较，比 === 更严格（能处理 NaN）
• 渲染阶段执行：在 render 阶段执行，不应包含副作用

通过理解 useMemo 和 useCallback 的实现原理，可以更精准地在需要优化的场景使用它们，避免不必要的性能开销，同时防止过度优化导致的代码复杂度增加。