useMemo 到底优化什么？

一、useMemo 到底优化什么？

const result = useMemo(() => {
  return compute(a, b);
}, [a, b]);

👉 它做了两件事：

✔ 1. 缓存计算结果

避免每次 render 都执行 compute

✔ 2. 返回“稳定引用”

如果结果是对象/数组/函数 → 引用不会变

二、useMemo 优化的三大场景

---

① 计算量大的逻辑（真正优化 CPU）

const filteredList = useMemo(() => {
  return list.filter(item => expensiveCheck(item));
}, [list]);

✔ 适用：

• 大数组 filter/sort/map
• 复杂计算（递归、树结构）
• 数据转换（JSON 处理）

👉 避免每次 render 重算

② 避免子组件重复渲染（引用稳定）

const config = useMemo(() => ({
  color: "red",
  size: 100
}), []);

传给子组件：

<Child config={config} />

👉 不用 useMemo：

每次 render → 新对象 → Child rerender ❌

👉 用 useMemo：

引用不变 → Child 不 rerender ✔

③ 配合 React.memo 使用（经典组合）

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

父组件：

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

return <Child data={data} />;

三、useMemo ≠ 性能优化（重点误区）

❌ 误区 1：所有计算都要 useMemo

const sum = useMemo(() => a + b, [a, b]);

👉 ❌ 完全没必要

原因：

• a + b 是 O(1)
• useMemo 本身也有成本（依赖比较）

---

❌ 误区 2：用来“缓存所有对象”

const style = useMemo(() => ({ color: "red" }), []);

👉 如果不传子组件，其实没意义

---

❌ 误区 3：useMemo = 不重新计算

错。

👉 依赖变了还是会重新计算

 

四、useMemo 的真实成本

每次 render：

1. 依赖数组比较（shallow compare）
2. 决定是否复用缓存

👉 所以：

• 小计算：useMemo > 不用（更慢）
• 大计算：useMemo < 不用（更快）

五、什么时候用 useMemo（判断标准）

✔ 用（满足任意一条）

• 计算成本高（O(n²)、复杂循环）
• 结果是对象/数组且要传子组件
• 需要配合 React.memo

---

❌ 不用

• 简单计算
• 不作为 props
• 不影响渲染