useMemo 和 React.memo区别

✅ useMemo 和 React.memo 区别总结（一句话版）

• useMemo：缓存 计算结果，避免重复执行耗时计算。
• React.memo：缓存 组件渲染结果，避免组件因 props 不变而重新渲染。

---

✅ 一、useMemo —— 缓存“值”

用途

用来缓存 计算成本高 或 依赖不变 时不需要重复计算的值。

示例：

const expensiveValue = useMemo(() => {
  return computeHeavy(a, b); // 这段代码很耗性能
}, [a, b]);

只要 a、b 不变，computeHeavy 就不会再次执行。

适用场景

• 大量计算，比如循环 10k 条数据
• 生成复杂对象，避免子组件 props 变化
• 缓存格式化数据、防止重复运算

---

✅ 二、React.memo —— 缓存“组件”

用途

让一个组件在 props 未变化时跳过渲染。

示例：

const Child = React.memo(function Child({ value }) {
  console.log("child render");
  return <div>{value}</div>;
});

如果 value 不变，Child 不会重新渲染。

适用场景

• 减少子组件重复渲染
• 列表中的小项
• 组件 props 很少变化时

---

⚠️ 但有坑 ⚠️

默认情况下：

<Child data={{ a: 1 }} />

因为 { a: 1 } 每次渲染都创建新的对象，所以 props 永远变化，memo 就失效了。

解决：

const data = useMemo(() => ({ a: 1 }), []);
<Child data={data} />;

---

✅ 三、两者配合使用（最佳实践）

常见优化模式：

const data = useMemo(() => ({ a: count }), [count]);

const Child = React.memo(({ data }) => {
  return <div>{data.a}</div>;
});

• useMemo 用来保证 data 对象稳定
• React.memo 用来让 Child 组件不重复渲染

---

📌 最终对比表

特性	useMemo	React.memo
缓存的内容	计算结果（值）	组件渲染结果
触发条件	依赖变化重新计算	props 变化重新渲染
用途	避免重复计算	避免重复渲染子组件
是否用于组件本身	❌	✔️
是否用于数据/对象	✔️	❌

---

🎯 什么时候用哪个？

• 有复杂计算 → 用 useMemo
• 子组件不要重复渲染 → 用 React.memo
• 子组件 props 传对象导致 memo 失效 → useMemo + React.memo 组合

---