# React 最佳实践 (react-best-practices)

> Vercel 维护的 React 和 Next.js 性能优化指南，含 8 个类别共 70 条按影响程度排序的规则。

- 分类: [代码规范](https://www.myskills.tools/zh/categories/code-standards/)
- 来源: 官方 · Vercel Labs
- 代码仓库: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices (commit dc8367e · v1.0.0)
- SKILL.md: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md
- 安装命令: `npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices`
- 许可证: MIT
- 兼容工具: Any SKILL.md agent
- 权限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。

## 核心规则

按影响程度依次应用规则，先处理最关键的两类：消除请求瀑布和减小打包体积。

## 执行阶段

1. **消除瀑布** — 独立操作用 Promise.all 并行，把 await 移到真正用到的分支，并用 Suspense 流式渲染。
2. **减小打包体积** — 直接导入而非经由 barrel 文件，用 next/dynamic 加载重组件，并在水合后再加载第三方脚本。
3. **服务端与数据获取** — 用 React.cache() 和 LRU 缓存去重，减少传给客户端组件的数据；客户端用 SWR 去重请求。
4. **渲染与 JS 优化** — 减少不必要的重新渲染、优化渲染与 JavaScript 热点路径，最后再考虑高级模式。
5. **查阅规则文件** — 需要细节时阅读 rules/ 下对应文件的错误与正确示例，或查看汇总的 AGENTS.md。

## 权限说明（据 SKILL.md 整理）

| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 需要 | 按规则编写或重构 React/Next.js 代码。 |
| 命令执行 | 不需要 | 这是规则参考，不要求运行命令。 |
| 网络外发 | 不需要 | 规则文件随技能附带，不需要联网。 |

## SKILL.md 头部信息（YAML）

```yaml
---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---
```

首页: https://www.myskills.tools/zh/ · URL: https://www.myskills.tools/zh/skills/react-best-practices/