> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Agent Skills: Vercel React最佳实践
- URL: https://www.hubwiz.com/blog/agent-skills-vercel-react-best-practices/
- Published: 2026-01-15T14:47:04.000Z
- Updated: 2026-01-15T14:47:04.000Z
- Description: 我们将10多年的React和Next.js优化知识封装到react-best-practices中，这是一个为AI代理和LLM优化的结构化仓库。
- Author: admin
- Tags: React, Best Practices, Performance, JavaScript, #Import 2026-10-14 14:41

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

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

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

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

所以，我们整理了这个React最佳实践框架（[react-best-practices](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices?ref=hubwiz.com)），以使这些问题更容易发现和更快修复。

## 1、核心理念：排序

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

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

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

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

1. 消除瀑布
2. 减少包大小

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

它包括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](https://github.com/vercel-labs/agent-skills?ref=hubwiz.com)，安装到Opencode、Codex、Claude Code、Cursor和其他编码代理。当你的代理发现级联的`useEffect`调用或重的客户端导入时，它可以参考这些模式并建议修复。

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

查看[react-best-practices](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices?ref=hubwiz.com)仓库。

---

原文链接：[Introducing: React Best Practices](https://vercel.com/blog/introducing-react-best-practices?ref=hubwiz.com)

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