用途：这是一套针对 React 19 + Vite + Cloudflare Workers 项目的性能与组件组合模式规则集，可用作编写新组件时的检查清单、审计现有代码的评审指南，或重构时的操作手册。规则按影响排序，应先修复 CRITICAL 问题，再处理 MEDIUM 问题。
适用时机：编写新的 React 组件或页面；评审代码中的性能问题；重构 props 过多或重复渲染的组件；排查“为什么慢”“为什么重渲染”；构建可复用组件库；合并前的代码评审。
主要能力（按优先级分组）： 一、消除瀑布流（CRITICAL）：把可并行的顺序 await 改为 Promise.all；将请求提升到最近的公共祖先向下传数据；用一个 Suspense 边界包裹异步兄弟；把 await 移入分支内避免取用不到的数据；重组件用 React.lazy + Suspense。查找方法是在组件中搜索 await。 二、包体积（CRITICAL）：避免 barrel 导入，改为直接路径导入；用 React.lazy 代码分割；第三方脚本水合后再加载；按需导入库的子模块；lucide-react 用显式具名导入；用 resolve.dedupe 去重 React。用 npx vite-bundle-visualizer 查看包内容。 三、组合架构（HIGH）：用显式变体替代布尔 props 爆炸；用复合组件拆分多 props 组件；用 children + 具名插槽替代 renderX props；提升状态；Provider 暴露接口隐藏实现；组件定义在父组件外部。判断标准是布尔 props 超过 5 个即需组合。 四、防止重渲染（MEDIUM）：提升默认对象/数组 props；渲染时派生而非 effect 中派生；依赖用原始值；拆分 context 或用 useSyncExternalStore；高频但无需渲染的值用 useRef；内联回调用 useCallback 或函数式 setState。用 React DevTools Profiler 排查。 五、React 19 变化（MEDIUM）：useFormState 更名 useActionState；ref 成为普通 prop；use(MyContext) 可在条件与循环中使用；useTransition/startTransition、useOptimistic；组件内 title/meta/link 自动提升到 head；Route lazy 仅配合 createBrowserRouter 生效。 另有渲染性能（骨架屏、虚拟化、content-visibility: auto、&& 渲染 0 的陷阱）、数据获取（TanStack Query/SWR 去重缓存、乐观更新、清理定时器）和 Vite + Cloudflare 细节（loadEnv、resolve.dedupe、Radix Select 空字符串哨兵、边缘运行时用 c.env 或 import.meta.env）等类别。
使用方式：按 /react-patterns [文件或组件路径] 调用，读取文件后按优先级检查规则，输出 file:line — [规则] 问题描述。
限制：评审 PR 时先看第 1-3 类，仅在关注性能时看第 4-8 类；并非所有重渲染都需要修复，只处理造成可见卡顿或多余计算的；价格、平台支持范围等未提供。