React Best Practices 是一份面向 React 与 Next.js 应用的综合性性能优化指南，包含 40+ 条规则，分为 8 个类别。规则按影响程度排定优先级，用于指导自动化重构和代码生成。
适用时机
在以下情况参考这些指南：编写新的 React 组件或 Next.js 页面；实现数据获取（客户端或服务端）；评审代码中的性能问题；重构既有的 React/Next.js 代码；优化打包体积或加载时间。
优先级排序的指南
规则按影响程度排序，其优先级与类别对应关系为：第 1 优先级为消除数据瀑布流（CRITICAL）；第 2 优先级为打包体积优化（CRITICAL）；第 3 优先级为服务端性能（HIGH）；第 4 优先级为客户端数据获取（MEDIUM-HIGH）；第 5 优先级为重渲染优化（MEDIUM）；第 6 优先级为渲染性能（MEDIUM）；第 7 优先级为 JavaScript 性能（LOW-MEDIUM）；第 8 优先级为高级模式（LOW）。
快速参考：关键模式（优先应用）
消除数据瀑布流：将 await 推迟到需要时（移入分支）；对相互独立的异步操作使用 Promise.all()；尽早启动 Promise、延后 await；使用 better-all 处理部分依赖；使用 Suspense 边界流式传输内容。
减小打包体积：避免 barrel 文件导入（直接从源文件导入）；对重型组件使用 next/dynamic；推迟非关键的第三方库；基于用户意图进行预加载。
高影响服务端模式
使用 React.cache() 进行按请求去重；使用 LRU 缓存进行跨请求缓存；最小化 RSC 边界处的序列化；通过组件组合并行化数据获取。
中影响客户端模式
使用 SWR 实现自动请求去重；将状态读取推迟到使用点；对开销较大的值使用惰性状态初始化；使用派生状态订阅；对非紧急更新应用 startTransition。
渲染模式
为 SVG 包装元素而非 SVG 元素本身添加动画；对长列表使用 content-visibility: auto；使用内联脚本防止水合不匹配；使用显式条件渲染（? : 而非 &&）。
JavaScript 模式
通过类批量修改 DOM CSS；为重复查找构建索引映射；缓存重复的函数调用；使用 toSorted() 而非 sort() 以保持不可变性；数组比较时先做长度检查。
参考资料
包含代码示例的完整文档位于：references/react-performance-guidelines.md（含全部模式的完整指南）。
如需查找某个特定模式，可在 references 中 grep：
grep -l "suspense" references/ grep -l "barrel" references/ grep -l "swr" references/