React 最佳实践

由 Vercel 工程团队提供的 React 与 Next.js 应用全面性能优化指南。涵盖 8 个类别共 57 条规则，按影响程度排序。

安装

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install react-best-practices

该技能的作用

提供可落地执行的规则，用于：

• 消除请求瀑布（request waterfalls）
• 优化包体积（bundle size）
• 提升服务端性能
• 高效进行客户端数据获取
• 最小化组件重渲染（re-renders）
• 渲染性能优化
• JavaScript 微优化
• 边缘场景下的高级模式

适用场景

• 编写新的 React 组件或 Next.js 页面时
• 实现数据获取逻辑（客户端或服务端）时
• 审查代码是否存在性能问题时
• 重构 React/Next.js 应用时
• 优化包体积或加载时间时
• 调试渲染缓慢或请求瀑布问题时

关键词

react performance, nextjs optimization, bundle size, waterfalls, suspense, server components, rsc, rerender, usememo, dynamic import, parallel fetching, cache, swr

规则类别优先级

速查表

1. 消除请求瀑布（CRITICAL）

2. 包体积优化（CRITICAL）

3. 服务端性能（HIGH）

4. 客户端数据获取（MEDIUM-HIGH）

5. 重渲染优化（MEDIUM）

6. 渲染性能（MEDIUM）

7. JavaScript 性能（LOW-MEDIUM）

8. 高级模式（LOW）

使用方法

查阅单条规则

rules/ 目录下的每条规则文件均包含：

• 该规则重要性的简要说明
• 错误代码示例及原因分析
• 正确代码示例及原理说明
• 额外上下文与参考资料

rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/rerender-memo.md

完整编译文档

如需查看所有规则展开后的完整指南，请查阅：AGENTS.md

这份超过 2900 行的文档包含全部规则的详细代码示例与深入解释，适用于系统性参考。

核心模式

并行数据获取

// 错误：串行获取
const user = await fetchUser()
const posts = await fetchPosts()

// 正确：并行获取
const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts()
])

动态导入

// 错误：Monaco 打包进主 chunk
import { MonacoEditor } from './monaco-editor'

// 正确：按需加载
const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false }
)

函数式 setState

// 错误：存在闭包过期风险
const addItem = useCallback((item) => {
  setItems([...items, item])
}, [items]) // items 每次变更都会导致重新创建

// 正确：始终基于最新状态
const addItem = useCallback((item) => {
  setItems(curr => [...curr, item])
}, []) // 引用稳定

绝对禁止事项

1. 绝对禁止在可并行执行时仍顺序 await
2. 绝对禁止从 barrel 文件导入（import { X } from 'lib'）——请直接导入
3. 绝对禁止在 Server Actions 中跳过身份验证——应视其为 API 路由同等对待
4. 绝对禁止向客户端组件传递整个对象，而实际只需其中某个字段
5. 绝对禁止对数字类型的条件渲染使用 && ——请改用三元运算符
6. 绝对禁止订阅仅在事件处理器中使用的状态——应在需要时按需读取
7. 绝对禁止使用 .sort() 原地修改数组——请改用 .toSorted()
8. 绝对禁止将初始化逻辑放在 useEffect([]) 中——请使用模块级守卫