React Best Practices 是一份针对 React 和 Next.js 应用的综合性性能优化指南，包含 40 多条按影响程度组织的规则，旨在帮助开发者消除性能瓶颈并遵循最佳实践。
用途
该技能适用于以下场景：优化 React 或 Next.js 应用性能；审查代码以寻找性能改进点；重构现有组件以提升性能；在实现新功能时兼顾性能；调试渲染或加载缓慢的问题；减小打包体积；消除请求瀑布流。
主要能力
指南覆盖八个类别，按影响程度从高到低排列：
-
消除瀑布流（关键）：防止顺序异步操作，包括将 await 延迟到需要时、基于依赖的并行化、防止 API 路由中的瀑布链、对独立操作使用 Promise.all()、策略性 Suspense 边界。
-
打包体积优化（关键）：减少初始 JavaScript 负载，包括避免 barrel 文件导入、条件模块加载、延迟非关键第三方库、对重型组件使用动态导入、基于用户意图预加载。
-
服务端性能（高）：优化服务端渲染和数据获取，包括跨请求 LRU 缓存、最小化 RSC 边界序列化、通过组件组合实现并行数据获取、使用 React.cache() 实现每请求去重。
-
客户端数据获取（中高）：自动去重和高效数据获取模式，包括去重全局事件监听器、使用 SWR 实现自动去重。
-
重渲染优化（中）：减少不必要的重渲染，包括将状态读取延迟到使用点、提取到记忆化组件、缩小 effect 依赖、订阅派生状态、使用惰性状态初始化、对非紧急更新使用 transitions。
-
渲染性能（中）：优化浏览器渲染过程，包括为 SVG 包装元素而非 SVG 元素添加动画、对长列表使用 CSS content-visibility、提升静态 JSX 元素、优化 SVG 精度、防止水合不匹配且不闪烁、使用 Activity 组件控制显示/隐藏、使用显式条件渲染。
-
JavaScript 性能（低中）：热路径的微优化，包括批量 DOM CSS 更改、为重复查找构建索引映射、在循环中缓存属性访问、缓存重复函数调用、缓存存储 API 调用、合并多个数组迭代、数组比较的提前长度检查、函数提前返回、提升 RegExp 创建、使用循环而非排序求最小/最大值、使用 Set/Map 实现 O(1) 查找、使用 toSorted() 替代 sort()。
-
高级模式（低）：边缘情况的专门技术，包括将事件处理器存储在 refs 中、useLatest 用于稳定回调 refs。
使用方式
完整性能指南位于 references 文件夹中的 react-performance-guidelines.md，包含全部 40 多条规则、代码示例和影响分析。每条规则包含：错误/正确代码对比、具体影响指标、应用优化的时机、真实示例。
优化 React 应用时的实施方法：先进行性能分析，使用 React DevTools Profiler 和浏览器性能工具识别瓶颈；聚焦关键路径，从消除瀑布流和减小打包体积开始；衡量影响，用指标（LCP、TTI、FID）验证改进；增量应用，不要过早过度优化；充分测试，确保优化不破坏功能。
适用场景与限制
该指南面向 React 和 Next.js 应用的性能优化，涵盖服务端与客户端。需要跟踪的关键指标包括：Time to Interactive (TTI)、Largest Contentful Paint (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS)、打包体积、服务端响应时间。
常见陷阱：不要从大型库使用 barrel 导入；不要用顺序 await 阻塞并行操作；不要在只需更新部分时重渲染整棵树；不要在关键路径加载分析/跟踪脚本；不要用 .sort() 修改数组而应使用 .toSorted()；不要在渲染中创建 RegExp 或重型对象。
项目特定的风格偏好：组件使用箭头函数，如 const Component = memo(() => ...) 而非 memo(function Component() ...)；在 TSX 中使用 useMemo 而非 IIFE；尽可能使用隐式返回；避免嵌套三元表达式，对复杂条件使用带提前返回的 useMemo 或带 if/else 块的 IIFE。
版本历史：v0.1.0（2026 年 1 月），由 Vercel Engineering 首次发布，包含 8 个类别下的 40 多条性能规则，以及全面的代码示例和影响分析。
相关资源包括 React 文档、Next.js 文档、SWR 文档、Vercel 打包优化、Vercel 仪表板性能、better-all 库、node-lru-cache。