关于 react-patterns
由 Vercel 维护的 React 和 Next.js 性能指南，面向本地或 Docker 部署场景。重点涵盖消除异步瀑布、缩减负载及提升界面响应能力，不依赖托管或边缘优化。
主要功能
- 01避免异步瀑布
- 02用 Suspense 流式渲染界面
- 03降低打包与启动开销
- 04缩减 RSC 负载
- 05缓存重复的服务端工作
- 06提升渲染响应能力
适用场景
- 01审查 React 或 Next.js 代码回归
- 02加快数据获取路由
- 03减少水合与内存开销
- 04保持长列表响应流畅
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-patterns确认已加载。
附带文件REACT_PATTERNS.md
详细介绍
Vercel React 最佳实践（本地 / Docker）
由 Vercel 维护的 React 与 Next.js 应用综合性能优化指南。本版本重点介绍适用于本地安装或 Docker 部署的最重要模式。
目的
提供一份高价值检查清单，帮助避免异步瀑布流、减少客户端负载，并在不依赖托管或边缘专属优化的情况下保持 UI 响应迅速。
适用场景
- 构建或重构 React 组件或 Next.js 页面
- 实现 Server Actions、Route Handlers 或数据获取
- 减少本地安装的启动时间或内存占用
- 调试卡顿的 UI 或较长的水合时间
- 审查代码中的性能回归
离线与 Docker 重点
- 相比 SEO，优先优化冷启动和稳定运行时的响应性。
- 使用进程内缓存，因为服务器进程会持续运行。
- 即使是本地 API 或数据库，也应避免顺序 await。
- 将非关键工作推迟到渲染之后或响应发送之后再执行。
- 尽量减少 RSC props，以降低水合和内存开销。
主要发现
- 通过尽早启动工作、延后 await，并结合
Promise.all或better-all，消除异步瀑布流。 - 使用 Suspense 边界以流式方式渲染 UI，而不是让整个页面阻塞等待数据。
- 通过动态导入、条件加载和直接导入，减少初始加载与内存占用。
- 尽量减少 RSC 负载：仅传递使用到的字段，避免重复的序列化数据。
- 缓存高频服务端工作：每个请求使用
React.cache，跨请求复用则使用 LRU。 - 通过记忆化子树、惰性状态初始化、transitions，以及对大列表使用
content-visibility，减少客户端工作量。
核心模式
async-parallel和async-api-routes：消除瀑布流async-suspense-boundaries：以流式方式渲染较慢的部分bundle-barrel-imports和bundle-dynamic-imports：降低启动成本server-serialization和server-dedup-props：缩小 RSC 负载server-cache-react和server-cache-lru：复用高频工作结果rerender-lazy-state-init和rerender-transitions：提升 UI 响应性rendering-content-visibility：用于长列表client-swr-dedup：用于请求去重
输出产物
REACT_PATTERNS.md：精简的、面向离线场景的指南AGENT.md：完整的编译参考文档
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布流 | 关键 | async- |
| 2 | 打包体积优化 | 关键 | bundle- |
| 3 | 服务端性能 | 高 | server- |
| 4 | 客户端数据获取 | 中高 | client- |
| 5 | 重新渲染优化 | 中 | rerender- |
| 6 | 渲染性能 | 中 | rendering- |
| 7 | JavaScript 性能 | 中低 | js- |
| 8 | 高级模式 | 低 | advanced- |
使用方法
从 REACT_PATTERNS.md 开始阅读精简指导。
完整编译文档
如需查看展开所有规则的完整指南：AGENT.md
评论
支持 Markdown