跳到主要内容

使用useMemo做性能优化

面试速答​

  • 以下内容以 React 18 为准。
  • useMemo 的作用是 缓存某次计算结果，避免依赖不变时重复执行昂贵计算。
  • 它是性能优化提示，不是语义保证，也不是“所有对象都要包一层”的通用法宝。

什么时候适合用​

1. 计算真的贵​

比如：

  • 大列表过滤
  • 排序
  • 树结构转换
  • 重型数据映射
const filteredList = useMemo(() => {
  return list.filter(item => item.name.includes(keyword))
}, [list, keyword])

2. 需要给子组件稳定引用​

如果子组件被 React.memo 包裹，而你每次都传一个新对象，记忆化就可能失效：

const options = useMemo(() => ({pageSize: 20}), [])

不适合的场景​

1. 计算很轻​

例如简单字符串拼接、几个字段相加，useMemo 自己也有依赖比较和维护成本。

2. 拿它保证逻辑正确​

如果业务逻辑“必须依赖缓存才能正确”，说明设计已经出问题了。

更稳的理解是：React 可以复用 memo 结果，但你不应该把它当存储层。

React 18 下怎么答更成熟​

React 18 让重渲染更常见，但这不意味着所有值都要 memo。

真正要看的还是：

  • 是否存在明显重复计算
  • 是否因为引用变化导致子组件无意义刷新
  • memo 带来的收益是否大于心智负担

标准答法​

问：useMemo 适合做什么优化？​

答：适合缓存昂贵计算结果，或者提供相对稳定的派生值引用，避免依赖不变时重复计算和联动重渲染。

问：为什么不能滥用？​

答：因为它本身也有成本，而且会让依赖关系更复杂。轻量计算场景下，加 useMemo 往往得不偿失。

易错点​

  • 把所有对象、数组都包进 useMemo。
  • 依赖写不全，导致拿到旧值。
  • 把 useMemo 当“强缓存”或“状态容器”。

速记要点​

  • useMemo 缓存的是计算结果。
  • 只在“真贵”或“真需要稳定引用”时用。
  • 它是优化提示，不是语义依赖。