深入理解 React useMemo：缓存机制与性能优化指南

---

一、什么是 useMemo？

useMemo 是 React 提供的 Hook API，是一个用于性能优化的钩子函数，用于‌缓存高开销计算的结果‌，避免在每次组件渲染时重复执行这些计算，从而优化性能。

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

---

二、useMemo 的核心机制

1. 缓存触发条件

• 依赖数组浅比较‌：使用 Object.is 逐个比较依赖项
• ‌重新计算规则‌：
  • ✅ 任一依赖项变化 → 重新计算并缓存新值
  • ❌ 所有依赖项不变 → 直接返回缓存值

2. 缓存存储方式

• ‌存储位置‌：组件对应的 Fiber 节点
• ‌生命周期‌：
  • 组件卸载 → 缓存销毁
  • 依赖变化 → 缓存更新
  • 空依赖数组 [] → 永久缓存

3. 引用类型缓存示例

function App({ theme }) {
  // 缓存配置对象，避免子组件无意义渲染
  const config = useMemo(
    () => ({ color: theme, size: "large" }),
    [theme]
  );
  return <Child config={config} />;
}

---

三、useMemo 的适用场景

1. 高性能计算优化

// 过滤大型列表时缓存结果
const filteredList = useMemo(() => 
  hugeList.filter(item => item.value > threshold), 
[threshold, hugeList]);

2. 稳定引用类型

// 缓存对象/数组，避免作为 props 传递时引发子组件重渲染
const data = useMemo(() => ({ id: 1, value: computedValue }), [computedValue]);

3. 避免重复渲染

// 配合 React.memo 使用
const MemoizedComponent = React.memo(Child);

function Parent() {
  const memoizedProps = useMemo(() => ({ onClick: handleClick }), []);
  return <MemoizedComponent {...memoizedProps} />;
}

---

四、useMemo 与 useEffect 的对比

特性	useMemo	useEffect
‌执行时机	在渲染阶段同步执行	在浏览器绘制后异步执行
主要用途	缓存计算结果	处理副作用（API 调用、DOM 操作等）
返回值	返回缓存值	无返回值（可返回清理函数）
依赖数组作用	控制缓存更新	控制副作用触发
性能影响	减少计算次数	可能引起额外渲染

代码对比示例：

// useMemo：计算值并立即使用
const value = useMemo(() => a + b, [a, b]);
return <div>{value}</div>;

// useEffect：执行副作用操作
useEffect(() => {
  fetchData(a).then(res => setData(res));
}, [a]); 

---

五、使用注意事项

1. 依赖数组陷阱

• ‌引用类型陷阱‌：避免直接使用新创建的对象/数组作为依赖项

// ❌ 错误：每次渲染生成新对象
useMemo(() => ..., [{ id }]);

// ✅ 正确：用 useMemo 稳定引用
const depObj = useMemo(() => ({ id }), [id]);
useMemo(() => ..., [depObj]);

2. 性能权衡原则

• 计算成本 < 缓存成本‌：简单计算（如 a + b）不需要缓存
• 优化级别排序‌：
  • 减少重渲染（React.memo / 状态提升）
  • 减少计算量（useMemo）
  • 减少 DOM 操作（虚拟列表等）

---

六、总结

useMemo 的正确使用需要理解其缓存机制并遵循以下原则：

• ‌精准依赖‌：确保依赖数组包含所有影响计算结果的变量
• 引用稳定‌：避免依赖项频繁创建新引用
• 性能评估‌：只在真正需要时使用，避免过早优化

结合 useEffect 的使用场景：

• 用 useMemo 缓存 ‌需要立即使用的计算结果
• 用 useEffect 处理 ‌异步副作用操作

合理搭配这两种 Hook，可以显著提升 React 应用的性能表现。

扩展阅读
精准值比较：深入解析 Object.is() 及其应用场景
React.memo 工作原理深度拆解
深入理解 Object.entries()：基础用法与 Object.keys() 的核心区别