✅ 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 组合