mcpField
R
react-best-practices

react-best-practices

github.com/marcioaltoe开发059 次安装1 天前更新
代码仓库

关于 react-best-practices

Vercel React Best Practices 是面向 React 和 Next.js 开发与代码审查的性能指导技能。其规则按优先级组织，涵盖数据获取、打包体积、服务端与客户端性能、渲染及 JavaScript 模式。

主要功能

  1. 018 类共 57 条规则
  2. 02按优先级排列优化指导
  3. 03数据获取与瀑布效应优化
  4. 04打包体积和服务端性能建议
  5. 05附示例的规则文件

适用场景

  1. 01编写 React 组件或 Next.js 页面
  2. 02审查代码中的性能问题
  3. 03缩减打包体积或加载时间
  4. 04重构数据获取模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/marcioaltoe/skills --skill react-best-practices

安装后在 Claude Code 中输入/react-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
README.md
rules/
_sections.md
_template.md
advanced-event-handler-refs.md
advanced-init-once.md
advanced-use-latest.md
async-api-routes.md
async-defer-await.md
async-dependencies.md
async-parallel.md
async-suspense-boundaries.md
bundle-barrel-imports.md
bundle-conditional.md
bundle-defer-third-party.md
bundle-dynamic-imports.md
bundle-preload.md
client-event-listeners.md
client-localstorage-schema.md
client-passive-event-listeners.md
client-swr-dedup.md
js-batch-dom-css.md
js-cache-function-results.md
js-cache-property-access.md
js-cache-storage.md
js-combine-iterations.md
js-early-exit.md
js-hoist-regexp.md
js-index-maps.md
js-length-check-first.md

详细介绍

Vercel React 最佳实践

面向 React 和 Next.js 应用的全面性能优化指南，由 Vercel 维护。涵盖 8 个类别中的 57 条规则，并按影响程度排序，为自动重构和代码生成提供指导。

适用场景

在以下情况下可参考这些指南：

  • 编写新的 React 组件或 Next.js 页面
  • 实现数据获取（客户端或服务端）
  • 检查代码中的性能问题
  • 重构现有 React/Next.js 代码
  • 优化打包体积或加载时间

按优先级划分的规则类别

优先级类别影响前缀
1消除瀑布流CRITICALasync-
2优化打包体积CRITICALbundle-
3服务端性能HIGHserver-
4客户端数据获取MEDIUM-HIGHclient-
5优化重新渲染MEDIUMrerender-
6渲染性能MEDIUMrendering-
7JavaScript 性能LOW-MEDIUMjs-
8高级模式LOWadvanced-

快速参考

1. 消除瀑布流（CRITICAL）
  • async-defer-await - 将 await 移到实际使用它的分支中
  • async-parallel - 使用 Promise.all() 并行执行独立操作
  • async-dependencies - 使用 better-all 处理部分依赖
  • async-api-routes - 在 API 路由中尽早启动 Promise，稍后再 await
  • async-suspense-boundaries - 使用 Suspense 流式传输内容
2. 优化打包体积（CRITICAL）
  • bundle-barrel-imports - 直接导入，避免使用聚合导出文件
  • bundle-dynamic-imports - 对大型组件使用 next/dynamic
  • bundle-defer-third-party - 在 hydration 后加载分析/日志记录工具
  • bundle-conditional - 仅在功能启用时加载模块
  • bundle-preload - 在悬停/聚焦时预加载，提升感知速度
3. 服务端性能（HIGH）
  • server-auth-actions - 像 API 路由一样验证服务端操作
  • server-cache-react - 使用 React.cache() 在每个请求内去重
  • server-cache-lru - 使用 LRU 缓存实现跨请求缓存
  • server-dedup-props - 避免在 RSC props 中重复序列化
  • server-serialization - 尽量减少传递给客户端组件的数据
  • server-parallel-fetching - 重构组件以并行执行数据获取
  • server-after-nonblocking - 使用 after() 执行非阻塞操作
4. 客户端数据获取（MEDIUM-HIGH）
  • client-swr-dedup - 使用 SWR 自动去重请求
  • client-event-listeners - 对全局事件监听器进行去重
  • client-passive-event-listeners - 为滚动事件使用被动监听器
  • client-localstorage-schema - 为 localStorage 数据添加版本并尽量精简
5. 优化重新渲染（MEDIUM）
  • rerender-defer-reads - 不要订阅仅在回调中使用的状态
  • rerender-memo - 将开销较大的操作提取到经过记忆化的组件中
  • rerender-memo-with-default-value - 将默认的非原始类型 props 提到组件外部
  • rerender-dependencies - 在 effects 中使用原始类型依赖项
  • rerender-derived-state - 订阅派生布尔值，而不是原始值
  • rerender-derived-state-no-effect - 在渲染期间派生状态，而不是在 effects 中
  • rerender-functional-setstate - 使用函数式 setState 保持回调稳定
  • rerender-lazy-state-init - 对开销较大的值，将函数传递给 useState
  • rerender-simple-expression-in-memo - 简单原始值无需使用 memo
  • rerender-move-effect-to-event - 将交互逻辑放入事件处理程序
  • rerender-transitions - 使用 startTransition 处理非紧急更新
  • rerender-use-ref-transient-values - 使用 refs 保存短暂且频繁变化的值
6. 渲染性能（中）
  • rendering-animate-svg-wrapper - 为 div 包装元素添加动画，而不是 SVG 元素
  • rendering-content-visibility - 对长列表使用 content-visibility
  • rendering-hoist-jsx - 将静态 JSX 提取到组件外部
  • rendering-svg-precision - 降低 SVG 坐标精度
  • rendering-hydration-no-flicker - 使用内联脚本处理仅客户端数据
  • rendering-hydration-suppress-warning - 抑制预期内的不匹配警告
  • rendering-activity - 使用 Activity 组件控制显示和隐藏
  • rendering-conditional-render - 条件渲染使用三元运算符，而不是 &&
  • rendering-usetransition-loading - 加载状态优先使用 useTransition
7. JavaScript 性能（低至中）
  • js-batch-dom-css - 通过类或 cssText 批量修改 CSS
  • js-index-maps - 为重复查找构建 Map
  • js-cache-property-access - 在循环中缓存对象属性
  • js-cache-function-results - 在模块级 Map 中缓存函数结果
  • js-cache-storage - 缓存 localStorage/sessionStorage 读取结果
  • js-combine-iterations - 将多个 filter/map 操作合并为一个循环
  • js-length-check-first - 在进行昂贵的比较前检查数组长度
  • js-early-exit - 从函数中提前返回
  • js-hoist-regexp - 将 RegExp 的创建移到循环外
  • js-min-max-loop - 使用循环查找最小值/最大值，而不是排序
  • js-set-map-lookups - 使用 Set/Map 实现 O(1) 查找
  • js-tosorted-immutable - 使用 toSorted() 保持不可变性
8. 高级模式（低）
  • advanced-event-handler-refs - 在 ref 中存储事件处理函数
  • advanced-init-once - 每次应用加载时只初始化一次
  • advanced-use-latest - 使用 useLatest 保持回调 ref 稳定

如何使用

阅读各条规则文件，了解详细说明和代码示例：

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

每条规则文件都包含：

  • 简要说明规则的重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 补充背景信息和参考资料

完整汇编文档

如需查看包含所有规则详细内容的完整指南：AGENTS.md

评论

支持 Markdown