preguntas-entrevista-react 性能实践：把 memo 组件的非原始默认参数提升为常量以恢复记忆化

• 前端
• 教程

导读

在 React 应用中，React.memo通过浅比较 props 来跳过不必要的重渲染，是优化列表、卡片等高频更新组件的关键手段。但一个极易被忽略的细节会悄悄“击穿”记忆化：当被 memo 包裹的组件为数组、函数、对象这类非原始类型的可选参数声明了默认值时，每次渲染都会生成一个新实例，导致memo()的严格相等比较永远失败。本文基于本仓库收录的 Vercel React Best Practices 规则集中的rerender-memo-with-default-value规则，讲清问题成因、修复方法与配套实践，读完即可写出稳定、可预测的 memo 组件。

问题：默认值参数如何悄悄击穿 memo

先看规则原文给出的反例（rerender-memo-with-default-value.md）：

const UserAvatar = memo(function UserAvatar({ onClick = () => {} }: { onClick?: () => void }) { // ... }) // Used without optional onClick <UserAvatar />

这段代码表面上没有问题，但内部隐藏着一次“静默的性能事故”。规则原文的解释非常明确：

When memoized component has a default value for some non-primitive optional parameter, such as an array, function, or object, calling the component without that parameter results in broken memoization. This is because new value instances are created on every rerender, and they do not pass strict equality comparison inmemo().

即：当被 memo 的组件对某个非原始类型的可选参数（数组、函数、对象）声明了默认值，且调用方省略了该参数时，记忆化就会失效。原因在于每次重渲染都会创建新的值实例，这些实例无法通过memo()内部的严格相等比较。

为什么每次渲染都会“新建一个函数”

关键在于默认参数= () => {}的求值时机。在 JavaScript 中，默认参数表达式在每次调用函数时都会重新求值，而不是在模块加载时求值一次。因此：

1. 父组件渲染<UserAvatar />时，React 调用UserAvatar函数组件；
2. 由于没有传入onClick，函数参数解构的默认值表达式() => {}被求值，生成一个全新的函数对象；
3. React 将这个新函数作为 props 的一部分交给memo()做浅比较；
4. 浅比较发现新旧onClick不是同一个引用（Object.is/ 严格相等失败），于是判定 props 已变化，组件被迫重新渲染。

结果就是：memo 形同虚设，无论父组件是否重渲染，UserAvatar的每次渲染都带着一个“新函数”，memo()的缓存永远无法命中。

与React.memo的浅比较机制对应

本仓库问答内容 ¿Cómo funcionaReact.memoy cuándo es útil? 对此有配套解释：React.memo记忆化函数组件的结果，只有在 props 经过浅比较发生变化时才会重新渲染。浅比较（shallow comparison）对原始类型比较值，对引用类型比较引用地址。一个每次渲染都重新创建的默认函数，在浅比较视角下就是“变化了”。

规则集 SKILL.md 将本规则归入第 5 类Re-render Optimization（重渲染优化），影响等级为 MEDIUM，并总结为一句可检索的要点：

rerender-memo-with-default-value- Hoist default non-primitive props（把非原始类型的默认 props 提升到模块层）

修复：把默认值提升为模块级常量

规则给出的正确写法如下：

const NOOP = () => {}; const UserAvatar = memo(function UserAvatar({ onClick = NOOP }: { onClick?: () => void }) { // ... }) // Used without optional onClick <UserAvatar />

关键改动只有一处：把() => {}从参数默认值位置提升（hoist）为模块顶层的常量NOOP。这样：

• NOOP在模块加载时创建一次，之后在整个应用生命周期内引用恒定；
• 每次渲染UserAvatar时，默认值取到的是同一个引用，浅比较通过，memo()正常生效；
• 调用方省略onClick时，行为不变（仍然是空函数），只是不再付出“每渲染新建函数”的代价。

适用范围：不止是函数

规则明确指出，同样的问题适用于所有非原始类型的默认参数。把它们统一整理一下：

一个很容易遗漏的细节：即使是“空”的[]或{}，只要写在默认参数位置，每次渲染同样会生成新实例——空数组和空对象也属于引用类型，浅比较仍然按引用判断。只有原始类型（字符串、数字、布尔值、null、undefined）的默认值（如count = 0、label = 'default'）不存在此问题，因为它们按值比较。

纵深：与相邻规则配合使用

本规则是规则集中“重渲染优化”这一族规则的一员，与其他条目相互配合，能形成完整的 memo 使用规范。阅读规则目录（.agents/skills/vercel-react-best-practices/rules/）可以发现以下相邻实践：

1. 只对“值得”的组件用 memo（rerender-memo）

rerender-memo.md 强调：把昂贵的计算工作提取进 memo 组件，可以在计算发生前提前 return，跳过不必要的计算。它与本规则的组合场景很典型——先用memo()提取昂贵组件，再确保该组件的默认非原始参数是稳定常量，两者缺一不可。该规则还给出了重要提示：如果项目启用了 React Compiler，手动使用memo()与useMemo()就不再必要，编译器会自动优化重渲染。

2. 用 useCallback 维持函数 props 稳定（para-que-sirve-el-hook-use-callback）

当调用方需要主动传入函数 props 时，本仓库问答 ¿Para qué sirve el hookuseCallback? 给出配套方案：useCallback让函数在依赖不变时复用上一次创建的引用。只有当依赖（如count、onIncrement）变化时才重建函数。这与“默认参数提升为常量”是一体两面——前者解决调用方传入的函数不稳定问题，后者解决组件内部兜底默认值不稳定问题，目标都是让传入 memo 组件的 props 引用保持稳定。

3. 不在组件内部定义组件（rerender-no-inline-components）

rerender-no-inline-components.md 与默认值问题的根因同源：在组件内部定义组件，每次渲染都会产生新的组件类型，React 会卸载旧实例并重新挂载，丢失全部内部状态与 DOM。这条规则的启示是：凡是“每次渲染都新建引用”的模式，都会破坏 memo 的浅比较前提，默认值、内联组件、内联箭头函数都需要警惕。

4. 用函数式 setState 避免闭包陷阱（rerender-functional-setstate）

rerender-functional-setstate.md 从另一个角度展示了“稳定引用”的价值：在基于当前状态更新时使用setItems(curr => ...)的函数式写法，可以让useCallback的依赖数组保持为空，回调引用永远稳定，从根源上避免陈旧闭包（stale closure）与不必要的回调重建。

5. 默认值问题在“派生状态”中的延伸（rerender-derived-state）

规则集中的rerender-derived-state系列（见 SKILL.md 的 Quick Reference）提醒：与其让 effect 订阅原始值（如width），不如在渲染期派生布尔值（const isMobile = width < 768）再订阅。这与本规则共享同一个理念——减少每次渲染都会变化的引用与值，是 React 性能优化的主线。

如何发现与排查这类问题

在实践中，这类问题很难靠肉眼一次定位，可以按以下步骤排查：

1. 检查 memo 组件的可选 props：打开被memo()包裹的组件，逐个审视解构参数里的默认值，找出类型为函数、数组、对象的项；
2. 判断调用方是否省略了这些参数：只有“省略时走默认值”的路径才触发问题；显式传参不会触发；
3. 用 React DevTools 的 Profiler 验证：观察该组件在父组件重渲染时是否仍然被标记为 re-render。若父组件 props 明明没变、子组件却频繁重渲染，优先怀疑引用型 props；
4. 批量修复：把默认值统一提升为模块级常量。为表意清晰，社区惯例常使用NOOP、EMPTY_ARRAY、DEFAULT_*这类命名（本规则示例即采用NOOP）。

小结

把 memo 组件的非原始默认参数提升为模块级常量，是最容易见效也最容易被忽视的 React 性能修复之一。其本质是保证“传入 memo 的 props 引用稳定”，从而让浅比较真正发挥作用。本仓库规则集 vercel-react-best-practices 将重渲染优化列为影响等级 MEDIUM 的专项类别，并提供了 15 条相关规则（前缀rerender-，见 _sections.md），而“默认参数提升为常量”正是其中最基础、最可立即落地的一条。写好 memo 组件，从管住每一个默认值开始。

• 前端
• 教程