审计一个慢页面,发现一堆 useMemo。把 "为优化而优化" 的 memo 删了之后,页面反而快了 30%。
原因:很多 memo 缓存的对象在依赖变化时频繁重建,memo 本身的开销 > 它省下的渲染。特别是缓存的值只被传给原生 DOM 元素时,完全没必要。
经验法则:
- 缓存值传给
memo()包裹的子组件 → 该 memo。 - 缓存值只用在当前组件 JSX → 大概率不用。
- 依赖数组很长、计算很轻 → 不用。
React Compiler 之后这些问题它自己会判断。
大家 useMemo 都是凭感觉写吗?