技能介绍

先说清楚要解决什么

React 项目慢，通常不是某一行代码写错，而是几类结构性毛病叠加：await 串行堆积成请求瀑布、bundle 里混进整库代码、组件靠十几个布尔 prop 拼装、以及无差别重渲染。这类问题在 Code Review 里很难靠“感觉”拦住，需要一个按严重度排序的固定检查表。

技能怎么工作

该技能定位为 React 19 + Vite + Cloudflare Workers 的性能与架构顾问。接收用户代码或评审请求（可选 ComponentCode），按以下顺序给出规则：

消除瀑布（CRITICAL）：用 Promise.all 并行独立异步；把子组件的 fetch 提升到最近公共祖先；把 await 放进真正会用到的分支；用 React.lazy + Suspense 替代“先 import 再渲染”。排查方式很直接：搜组件里的 await，每个都可能是瀑布。
包体控制（CRITICAL）：直引具体文件而非 barrel 全量引入；重组件用 React.lazy 分割；三方库在 hydration 之后再加载；lodash/debounce 这类按需引入；图标显式具名引入；vite.config 里配置 resolve.dedupe。
组合架构（HIGH）：布尔 prop 超过 5 个就拆成显式变体组件；复杂组件拆成复合组件（如 Dialog + Dialog.Content 共享 context）；renderX prop 换成 children 与具名插槽；内联组件移到外部，否则每次渲染都会重挂。
防重渲染（MEDIUM）：默认 object/array 提到组件外；派生状态在渲染期用 useMemo 而非 effect；对象依赖改用原始值（config.id）；必要时拆分 context 或加选择器；高频瞬态值用 useRef。
React 19 特性（MEDIUM）：按 19 的新增与变更规则调整，如 use() 读资源、ref 可赋值、useOptimistic 等。

输出长什么样

产出 ReactReview 工件：按 CRITICAL / HIGH / MEDIUM 排序的 issues（含 pattern 与 fix）、bundle_tips 与 score，同时给出包体与组合建议。完整规则表见 references/template.md，结果也可交给 design-review / ux-audit 做配套检查。