用途:在编写、审查或重构 React/Next.js 代码时诊断性能问题,如首屏加载慢、交互卡顿、客户端 CPU 占用高、包体积或 Core Web Vitals 回退,以及服务端组件与 API 路由中的请求瀑布。
主要能力:按优先级分层组织规则。第 1 类消除瀑布(async-):await 前先做廉价同步判断、延迟 await 到使用分支、独立请求用 Promise.all、按需提前启动 Promise、用 Suspense 流式渲染、服务端组件通过组合并行。第 2 类包体积(bundle-):直接导入而非 barrel、路径可静态分析、重组件用 next/dynamic、第三方脚本延后、条件加载、悬停预加载。第 3 类服务端(server-):Server Actions 需像 API 路由一样鉴权与授权、React.cache() 请求内去重、跨请求用 LRU、减少 RSC props 重复序列化、静态 I/O 提升到模块作用域、不在 RSC/SSR 中用可变模块级状态、Next.js 15 用 after() 做非阻塞工作。第 4 类客户端取数:SWR/TanStack Query 去重、共享全局事件监听、passive 监听、localStorage 带版本并精简。第 5 类重渲染:不在回调中订阅状态、昂贵计算抽到 memo 组件、提升非原始类型默认值、effect 依赖用原始值、订阅派生布尔、渲染期派生而非 useEffect、函数式 setState、惰性初始化、避免简单原始值 memo、拆分独立依赖的 hook、交互逻辑放入事件处理器、startTransition、useDeferredValue、频繁瞬态值用 useRef、不在组件内定义组件。第 6 类渲染:动画作用于包装元素、长列表用 content-visibility、提升静态 JSX、降低 SVG 坐标精度、内联脚本防水合闪烁、窄范围 suppressHydrationWarning、React 19 用 Activity、用三元而非 &&、加载态用 useTransition、React DOM 资源提示、script 的 defer/async。第 7 类 JavaScript:批量 DOM 变更、Map 查找、循环缓存长度、记忆化纯函数、缓存 localStorage 读取、flatMap 合并、提前返回、循环外提升 RegExp、手写 min/max、Set/Map 判断成员等。第 8 类高级模式:useEffectEvent、事件处理器 ref、模块级初始化一次、useLatest。
用法与限制:技能提供决策树与规则索引,用于主动代码审查与重构;部分规则已被 Next.js 13.5+ Optimize Package Imports、React Compiler、Turbopack、Bundle Analyzer 自动化,若项目启用 React Compiler,rerender-* 手动记忆化规则应降级为仅审查。原文提到相关技能、规则目录、agent 与命令(如 /react-review、/react-build、/react-test),具体细节暂未提供完整清单。原文为 MIT 许可,版权 Vercel Engineering,v1.0.0 2026 年 1 月。上述内容均依据所给资料整理。