React.memo 组件记忆化
最后更新：2026-10-28
React.memo 组件记忆化
React.memo 包裹组件后，props 浅比较不变即跳过重渲染，直接复用上次输出。适合「渲染贵、props 常稳定」的子组件；父组件频繁刷新（输入、鼠标移动）时收益最明显。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | API |
| 引入版本 | React 16.6 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const MemoList = memo(function List({ items, onSelect }) {
return items.map(it => <Row key={it.id} item={it} onSelect={onSelect} />)
})
// props 浅比较相等 → 跳过渲染
// 第二参数可自定义比较：memo(Cmp, (prev, next) => equal)⚙️ 参数
| Component | 要包裹的目标组件，通常是渲染成本较高的展示组件。 |
|---|---|
| areEqual（可选） | 自定义比较函数 (prevProps, nextProps) => boolean，返回 true 表示相等、跳过渲染。 |
返回值：返回记忆化后的新组件，用法与原组件完全相同。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
反复点按钮只更新计数文字，控制台不再打印「列表渲染了」——items 引用未变，memo 让列表整体跳过重渲染。💡 要点
💡 提示 memo 只做 props 浅比较：传进去的函数/对象每次新建就会击穿缓存，需配 useCallback/useMemo。
ℹ️ 说明 有 children 的组件通常不适合 memo——children 是每次渲染新建的元素引用。
⚠️ 注意 不要无脑 memo 全部组件：包一层也有比较成本，先用 DevTools Profiler 找到真热点。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q memo 和 useMemo 什么区别？
A memo 是高阶组件，缓存「组件的渲染输出」；useMemo 是 Hook，缓存「某个计算值」。
Q 为什么包了 memo 还重渲染？
A 多半是 props 里有每次新建的对象/数组/函数，浅比较必然不等——用 useMemo/useCallback 稳定引用。
Q 第二参数 areEqual 怎么写？
A 接收 (prev, next) 返回 true 表示相等可跳过渲染；只在浅比较确实不适用（如深比较某字段）时使用。
