When Not to Memo 何时不必记忆
最后更新：2026-10-28
When Not to Memo 何时不必记忆
memo/useMemo/useCallback 不是免费午餐：比较与缓存有成本，代码也更难读。多数组件渲染本来就便宜，直接重渲染反而更快。掌握「什么时候不用」，比到处加 memo 更重要。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// 通常不需要 memo 的情况：
// 1. 组件渲染足够快（纯文本、少量节点）
// 2. props 每次都变（对象字面量、内联函数）
// 3. 状态就在本组件，父组件渲染必然带动它
<MemoChild style={{ color: 'red' }} onClick={() => go()} />
// ↑ 每次渲染新对象/新函数，memo 形同虚设返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
打字时 Badge 被跳过（memo 起效），但点 +1 时 Badge 必然重渲染——它的 prop 就是 count。这个场景 memo 无收益，删掉更简洁。💡 要点
⚠️ 注意 状态提升后「props 每次都从父渲染中来」的组件，加 memo 往往无收益。
💡 提示 先量后优：React DevTools Profiler 确认真有渲染热点，再上 memo 三件套。
ℹ️ 说明 React 18+ 的自动批处理与并发特性已让很多「直觉上的慢」消失，别凭感觉优化。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 随手给每个组件加 memo 会怎样？
A 代码更啰嗦、props 比较有开销，还常常因内联 props 失效而毫无收益——优化要有的放矢。
Q 怎么判断组件渲染慢？
A React DevTools Profiler 记录一次交互，看各组件的渲染耗时与渲染次数，找排序靠前的热点。
Q memo 失效的常见原因？
A 内联对象/数组/函数 props、children 元素每次重建、context 变化（memo 不拦截 context 更新）。
