react-best-practices

React Best Practices 是一份针对 React 和 Next.js 应用的综合性性能优化指南，包含 40 多条按影响程度组织的规则，旨在帮助开发者消除性能瓶颈并遵循最佳实践。该技能由 Vercel Engineering 发布，初始版本为 v0.1.0（2026 年 1 月）。

一、用途与适用场景

在以下情况使用本技能：优化 React 或 Next.js 应用性能；审查代码以寻找性能改进点；重构现有组件以提升性能；在实现新功能时兼顾性能；调试渲染或加载缓慢的问题；缩减打包体积；消除请求瀑布。

二、覆盖的关键领域

指南按影响程度分为 8 个类别：

消除请求瀑布（关键）：防止顺序执行的异步操作。瀑布是头号性能杀手，每个顺序 await 都会增加完整的网络延迟。相关规则包括：将 await 推迟到真正需要时、基于依赖关系并行化、防止 API 路由中的瀑布链、对独立操作使用 Promise.all()、设置策略性 Suspense 边界。
打包体积优化（关键）：减少初始 JavaScript 载荷，改善可交互时间和最大内容绘制。相关规则包括：避免 barrel 文件导入、条件式模块加载、推迟非关键第三方库、对重型组件使用动态导入、基于用户意图预加载。
服务端性能（高）：优化服务端渲染与数据获取。相关规则包括：跨请求 LRU 缓存、最小化 RSC 边界的序列化、通过组件组合实现并行数据获取、使用 React.cache() 实现按请求去重。
客户端数据获取（中高）：自动去重与高效的数据获取模式。相关规则包括：去重全局事件监听器、使用 SWR 实现自动去重。
重渲染优化（中）：减少不必要的重渲染，避免浪费计算。相关规则包括：将状态读取推迟到使用点、抽取为记忆化组件、收窄 effect 依赖、订阅派生状态、使用惰性状态初始化、对非紧急更新使用 transition。
渲染性能（中）：优化浏览器渲染过程。相关规则包括：为 SVG 外层容器而非 SVG 元素添加动画、对长列表使用 CSS content-visibility、提升静态 JSX 元素、优化 SVG 精度、避免水合不匹配且不闪烁、使用 Activity 组件控制显示/隐藏、使用显式条件渲染。
JavaScript 性能（低到中）：热路径的微优化。相关规则包括：批量处理 DOM CSS 变更、为重复查找构建索引映射、在循环中缓存属性访问、缓存重复函数调用、缓存存储 API 调用、合并多次数组遍历、数组比较前先做长度检查、函数提前返回、提升 RegExp 创建、用循环代替排序求最小/最大值、使用 Set/Map 实现 O(1) 查找、使用 toSorted() 代替 sort()。
高级模式（低）：针对边缘情况的专门技术。相关规则包括：将事件处理器存储在 ref 中、使用 useLatest 获得稳定的回调 ref。

三、使用方式

完整的性能指南位于 references 文件夹中的 react-performance-guidelines.md，包含全部 40 多条规则、代码示例和影响分析。每条规则都包含：错误/正确代码对比、具体影响指标、适用该优化的时机、真实示例。

文档给出的常见模式示例包括：

并行数据获取： const [user, posts, comments] = await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])

直接导入： // ❌ 加载整个库 import { Check } from 'lucide-react'

// ✅ 只加载所需内容 import Check from 'lucide-react/dist/esm/icons/check'

动态组件： import dynamic from 'next/dynamic'

const MonacoEditor = dynamic( () => import('./monaco-editor'), { ssr: false } )

四、实施方法

优化 React 应用时建议：先做性能分析，使用 React DevTools Profiler 和浏览器性能工具定位瓶颈；聚焦关键路径，从消除瀑布和缩减打包体积入手；衡量影响，用指标（LCP、TTI、FID）验证改进；增量应用，不要过早过度优化；充分测试，确保优化不破坏功能。

五、需要跟踪的关键指标

可交互时间（TTI）：页面何时完全可交互；最大内容绘制（LCP）：主要内容何时可见；首次输入延迟（FID）：对用户交互的响应能力；累积布局偏移（CLS）：视觉稳定性；打包体积：初始 JavaScript 载荷；服务端响应时间：服务端渲染内容的 TTFB。

六、常见陷阱

应避免：从大型库使用 barrel 导入；用顺序 await 阻塞并行操作；仅部分需要更新时重渲染整棵树；在关键路径加载分析/跟踪脚本；用 .sort() 而非 .toSorted() 修改数组；在渲染中创建 RegExp 或重型对象。

应当：直接从源文件导入；对独立操作使用 Promise.all()；记忆化昂贵组件；惰性加载非关键代码；使用不可变数组方法；将静态对象提升到组件外部。

七、相关资源

文档列出的资源包括：React 文档、Next.js 文档、SWR 文档、Vercel 打包优化、Vercel Dashboard 性能、better-all 库、node-lru-cache。

八、限制

资料未提供该技能的收费、价格、平台支持范围或具体安装命令等信息，暂未提供。

技能介绍