Agent Skills: Vercel React最佳实践

React性能工作通常是反应式的。一个版本发布出去，应用感觉变慢，团队开始追逐症状。这很昂贵，而且很容易优化错误的东西。

我们在生产代码库中看到了同样的根本原因超过十年：

意外变成顺序的异步工作
随着时间增长的大型客户端包
重新渲染超过需要的组件

这里的"为什么"很简单：这些不是微优化。它们表现为等待时间、卡顿和重复成本，影响每个用户会话。

所以，我们整理了这个React最佳实践框架（react-best-practices），以使这些问题更容易发现和更快修复。

1、核心理念：排序

大多数性能工作失败是因为它在技术栈中开始得太低。

如果请求瀑布添加600ms的等待时间，那么你的useMemo调用优化得如何并不重要。如果你每个页面发送额外300KB的JavaScript，削减循环的几微秒就不会重要。

性能工作也会复合。今天发布的少量回归成为长期税收，直到有人偿还债务。

所以框架从通常首先移动实际指标的两个修复开始：

消除瀑布
减少包大小

然后它继续服务器端性能、客户端获取和重新渲染优化。

它包括8个类别中的40+规则，按影响排序，从关键（消除瀑布、减少包大小）到增量（高级模式）。

2、里面还有什么？

仓库涵盖八个性能类别：

消除异步瀑布
包大小优化
服务器端性能
客户端数据获取
重新渲染优化
渲染性能
高级模式
JavaScript性能

每个规则包括影响评级（关键到低）以帮助优先修复，加上显示什么打破和如何修复的代码示例。

例如，这里是一个阻塞未使用代码的常见模式：

不正确（阻塞两个分支）：

async function handleRequest(userId: string, skipProcessing: boolean) {
  const userData = await fetchUserData(userId)
  
  if (skipProcessing) {
    // Returns immediately but still waited for userData
    return { skipped: true }
  }
  
  // Only this branch uses userData
  return processUserData(userData)
}

正确（只在需要时阻塞）：

async function handleRequest(userId: string, skipProcessing: boolean) {
  const userData = await fetchUserData(userId)
  
  if (skipProcessing) {
    // Returns immediately but still waited for userData
    return { skipped: true }
  }
  
  // Only this branch uses userData
  return processUserData(userData)
}

单个规则文件编译成AGENTS.md，一个文档，你的代理可以在审查代码或建议优化时查询。它旨在一致遵循，包括AI代理进行重构，这样团队可以在大型代码库中应用相同的决策。

3、这些实践是如何收集的

这些不是理论的。它们来自生产代码库的真实性能工作。

一些例子：

组合循环迭代

一个聊天页面扫描相同的消息列表八次。我们将其组合成一次传递，当你有数千条消息时，这会累加。

并行化等待

一个API在开始下一个之前等待一个数据库调用完成，即使它们不依赖彼此。同时运行它们将总等待时间减半。

调整字体回退

在使用自定义字体加载之前使用系统字体时，标题看起来局促。调整字母间距使回退看起来有意而不是破损。

4、在你的编码代理中使用react-best-practices

这些最佳实践也打包为Agent Skills，安装到Opencode、Codex、Claude Code、Cursor和其他编码代理。当你的代理发现级联的useEffect调用或重的客户端导入时，它可以参考这些模式并建议修复。

1npx add-skill vercel-labs/agent-skills

查看react-best-practices仓库。

原文链接：Introducing: React Best Practices

汇智网翻译整理，转载请标明出处