react-best-practices

React 最佳实践 - 性能优化

面向 React 和 Next.js 应用的全面性能优化指南，包含 40+ 条按影响程度组织的规则。旨在帮助开发者消除性能瓶颈并遵循最佳实践。

何时使用此技能

在以下情况下使用 React 最佳实践：

• 优化 React 或 Next.js 应用性能
• 审查代码以寻找性能改进点
• 重构现有组件以获得更好的性能
• 在实现新功能时考虑性能
• 调试渲染或加载缓慢的问题
• 减小打包体积
• 消除请求瀑布

涵盖的关键领域：

• 消除瀑布（关键）：防止串行异步操作
• 打包体积优化（关键）：减少初始 JavaScript 载荷
• 服务端性能（高）：优化 RSC 和数据获取
• 客户端数据获取（中-高）：实现高效缓存
• 重渲染优化（中）：尽量减少不必要的重渲染
• 渲染性能（中）：优化浏览器渲染
• JavaScript 性能（低-中）：热路径的微优化
• 高级模式（低）：针对边缘情况的专门技术

快速参考

关键优先事项

1. 将 await 延迟到需要时 - 将 await 移到使用它们的分支中
2. 使用 Promise.all() - 并行化独立的异步操作
3. 避免桶文件导入 - 直接从源文件导入
4. 动态导入 - 懒加载重量级组件
5. 策略性 Suspense - 在显示布局的同时流式传输内容

常见模式

并行数据获取：

const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

直接导入：

// ❌ Loads entire library
import { Check } from 'lucide-react'

// ✅ Loads only what you need
import Check from 'lucide-react/dist/esm/icons/check'

动态组件：

import dynamic from 'next/dynamic'

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

使用这些指南

完整的性能指南位于 references 文件夹中：

• react-performance-guidelines.md：包含全部 40+ 条规则、代码示例和影响分析的完整指南

每条规则包括：

• 错误/正确代码对比
• 具体影响指标
• 何时应用该优化
• 真实世界示例

类别概览

1. 消除瀑布（关键）

瀑布是头号性能杀手。每个串行 await 都会增加完整的网络延迟。

• 将 await 延迟到需要时
• 基于依赖的并行化
• 防止 API 路由中的瀑布链
• 对独立操作使用 Promise.all()
• 策略性 Suspense 边界

2. 打包体积优化（关键）

减小初始打包体积可以改善可交互时间和最大内容绘制。

• 避免桶文件导入
• 条件模块加载
• 延迟非关键第三方库
• 对重量级组件使用动态导入
• 基于用户意图进行预加载

3. 服务端性能（高）

优化服务端渲染和数据获取。

• 跨请求 LRU 缓存
• 最小化 RSC 边界处的序列化
• 通过组件组合进行并行数据获取
• 使用 React.cache() 进行按请求去重

4. 客户端数据获取（中-高）

自动去重和高效的数据获取模式。

• 去重全局事件监听器
• 使用 SWR 进行自动去重

5. 重渲染优化（中）

减少不必要的重渲染，以尽量减少浪费的计算。

• 将状态读取延迟到使用点
• 提取到记忆化组件
• 缩小 effect 依赖范围
• 订阅派生状态
• 使用惰性状态初始化
• 对非紧急更新使用过渡

6. 渲染性能（中）

优化浏览器渲染过程。

• 动画化 SVG 包装器而不是 SVG 元素
• 对长列表使用 CSS content-visibility
• 提升静态 JSX 元素
• 优化 SVG 精度
• 防止水合不匹配而不产生闪烁
• 使用 Activity 组件进行显示/隐藏
• 使用显式条件渲染

7. JavaScript 性能 (低-中)

针对热路径的微优化。

• 批量处理 DOM CSS 更改
• 为重复查找构建索引映射
• 在循环中缓存属性访问
• 缓存重复的函数调用
• 缓存存储 API 调用
• 合并多个数组迭代
• 数组比较时提前进行长度检查
• 函数提前返回
• 提升 RegExp 创建
• 用循环求最小/最大值，而非使用 sort
• 使用 Set/Map 实现 O(1) 查找
• 使用 toSorted() 而非 sort()

8. 高级模式 (低)

针对边缘情况的专门技术。

• 将事件处理程序存储在 refs 中
• 使用 useLatest 实现稳定的回调 refs

实现方法

优化 React 应用时：

1. 先进行性能分析：使用 React DevTools Profiler 和浏览器性能工具识别瓶颈
2. 聚焦关键路径：从消除瀑布请求和减小打包体积开始
3. 衡量影响：通过指标 (LCP、TTI、FID) 验证改进效果
4. 逐步应用：不要过早过度优化
5. 充分测试：确保优化不会破坏功能

需要跟踪的关键指标

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

需要避免的常见陷阱

❌ 不要：

• 从大型库中使用桶式导入
• 用顺序 await 阻塞并行操作
• 当仅部分需要更新时重新渲染整个树
• 在关键路径中加载分析/跟踪脚本
• 使用 .sort() 而非 .toSorted() 改变数组
• 在 render 中创建 RegExp 或重型对象

✅ 要：

• 直接从源文件导入
• 对独立操作使用 Promise.all()
• 对开销大的组件进行记忆化
• 懒加载非关键代码
• 使用不可变数组方法
• 将静态对象提升到组件外部

资源

• React 文档
• Next.js 文档
• SWR 文档
• Vercel 打包优化
• Vercel Dashboard 性能
• better-all 库
• node-lru-cache

版本历史

v0.1.0 (2026 年 1 月)

• Vercel Engineering 首次发布
• 涵盖 8 个类别的 40+ 条性能规则
• 全面的代码示例和影响分析