React 最佳实践

来自 Vercel 工程团队的 React 和 Next.js 应用程序综合性能优化指南。包含 8 个类别下的 57 条规则，按影响程度排序。

安装

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install react-best-practices

此技能的作用

为以下方面提供可操作的规则：

• 消除请求瀑布流
• 优化打包体积
• 提升服务器端性能
• 高效的客户端数据获取
• 最小化重新渲染
• 渲染性能优化
• JavaScript 微优化
• 针对边缘情况的高级模式

何时使用

• 编写新的 React 组件或 Next.js 页面时
• 实现数据获取时（客户端或服务器端）
• 审查代码以查找性能问题时
• 重构 React/Next.js 应用程序时
• 优化打包体积或加载时间时
• 调试缓慢渲染或瀑布流问题

关键词

React性能、Next.js优化、包体积、瀑布流、Suspense、服务器组件、RSC、重新渲染、useMemo、动态导入、并行获取、缓存、SWR

按优先级划分的规则类别

快速参考

1. 消除瀑布流（关键）

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

3. 服务器端性能（高优先级）

4. 客户端数据获取（中高优先级）

5. 重新渲染优化（中等难度）

规则

7. JavaScript性能（低-中）

8. 高级模式（低优先级）

使用方法

阅读单个规则

每个规则文件位于rules/目录下，包含：

• 简要说明其重要性
• 错误代码示例及解释
• 正确代码示例及解释
• 附加上下文和参考资料

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

完整编译文档

如需包含所有规则详情的完整指南：AGENTS.md

这份2900多行的文档包含每个规则的完整代码示例和详细解释，适合全面参考。

关键模式

并行数据获取

// Bad: sequential
const user = await fetchUser()
const posts = await fetchPosts()

// Good: parallel
const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts()
])

动态导入

// Bad: bundles Monaco with main chunk
import { MonacoEditor } from './monaco-editor'

// Good: loads on demand
const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false }
)

函数式 setState

// Bad: stale closure risk
const addItem = useCallback((item) => {
  setItems([...items, item])
}, [items]) // recreates on every items change

// Good: always uses latest state
const addItem = useCallback((item) => {
  setItems(curr => [...curr, item])
}, []) // stable reference

切勿

1. 切勿对可并行运行的操作顺序使用 await
2. 切勿从桶文件导入（import { X } from 'lib'）——应直接导入
3. 切勿在服务器操作中跳过身份验证——应将其视为 API 路由
4. 切勿向客户端组件传递整个对象，当仅需一个字段时
5. 切勿 使用 &&对数字进行条件渲染——应使用三元运算符
6. 切勿订阅仅用于事件处理程序的状态——应按需读取
7. 切勿使用.sort()对数组进行原地排序——应使用.toSorted()
8. 切勿将初始化操作置于useEffect([])中——请改用模块级守卫