mcpField
R
react-best-practices

react-best-practices

github.com/lgariv-dn开发153 次安装27 周前更新
代码仓库

关于 react-best-practices

react-best-practices 是面向 React 19.2 应用的性能优化指南，包含 30 条规则，分为七类并按影响排序，供编写、审查或重构 React 代码时参考。

主要功能

  1. 01涵盖七类共 30 条规则
  2. 02优先介绍异步与包体积优化
  3. 03涵盖客户端与渲染模式
  4. 04提供 JavaScript 性能技巧
  5. 05各规则文件附带代码示例

适用场景

  1. 01编写 React 组件时参考优化建议
  2. 02审查 React 代码中的性能问题
  3. 03重构应用并优化加载时间

安装

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

$npx skills add https://github.com/lgariv-dn/frontend-skills --skill react-best-practices

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

包含的文件

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

AGENTS.md
rules/
advanced-event-handler-refs.md
advanced-init-once.md
async-defer-await.md
async-parallel.md
async-suspense-boundaries.md
bundle-barrel-imports.md
bundle-conditional.md
bundle-preload.md
client-localstorage-schema.md
client-passive-event-listeners.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
js-min-max-loop.md
js-set-map-lookups.md
js-tosorted-immutable.md
rendering-activity.md
rendering-animate-svg-wrapper.md
rendering-conditional-render.md
rendering-content-visibility.md
rendering-svg-precision.md
rendering-use-transition-loading.md
rerender-defer-reads.md
rerender-dependencies.md

详细介绍

React 最佳实践

面向 React 应用的全面性能优化指南，改编自 Vercel Engineering。涵盖 7 个类别中的 30 条规则，并按影响程度排序，帮助自动重构和代码生成。

注意：此版本针对纯 React 19.2 进行了定制：

  • 已移除服务端数据获取和 SWR 规则（项目使用 react-query）
  • 已移除 Next.js 特定规则（next/dynamic、SSR hydration 等）
  • 已启用 React Compiler——已移除记忆化规则（memo、useMemo、useCallback），因为编译器会自动处理

适用场景

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

  • 编写新的 React 组件
  • 检查代码是否存在性能问题
  • 重构现有 React 代码
  • 优化包体积或加载时间

按优先级划分的规则类别

优先级类别影响前缀
1消除瀑布式请求CRITICALasync-
2优化包体积CRITICALbundle-
3客户端模式MEDIUM-HIGHclient-
4优化重复渲染MEDIUMrerender-
5渲染性能MEDIUMrendering-
6JavaScript 性能LOW-MEDIUMjs-
7高级模式LOWadvanced-

快速参考

1. 消除瀑布式请求（CRITICAL）
  • async-defer-await - 将 await 移到实际使用它的分支中
  • async-parallel - 对独立操作使用 Promise.all()
  • async-suspense-boundaries - 使用 Suspense 流式传输内容
2. 优化包体积（CRITICAL）
  • bundle-barrel-imports - 直接导入，避免使用聚合导出文件
  • bundle-conditional - 仅在功能启用时加载模块
  • bundle-preload - 在悬停或聚焦时预加载，提升感知速度
3. 客户端模式（MEDIUM-HIGH）
  • client-localstorage-schema - 类型安全地访问 localStorage
  • client-passive-event-listeners - 滚动或触摸时使用被动事件监听器
4. 优化重复渲染（MEDIUM）
  • rerender-defer-reads - 不要订阅仅在回调中使用的状态
  • rerender-dependencies - 在 effects 中使用原始类型依赖项
  • rerender-derived-state - 订阅派生布尔值，而非原始值
  • rerender-functional-setstate - 使用函数式 setState 实现稳定的回调
  • rerender-lazy-state-init - 对开销较大的值，将函数传给 useState
  • rerender-transitions - 对非紧急更新使用 startTransition
5. 渲染性能（MEDIUM）
  • rendering-animate-svg-wrapper - 为 div 包装元素添加动画，而非 SVG 元素
  • rendering-content-visibility - 对长列表使用 content-visibility
  • rendering-svg-precision - 降低 SVG 坐标精度
  • rendering-activity - 使用 Activity 组件控制显示和隐藏
  • rendering-conditional-render - 条件渲染使用三元表达式，而非 &&
6. JavaScript 性能（LOW-MEDIUM）
  • 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() 保持不可变性
7. 高级模式（LOW）
  • advanced-event-handler-refs - 在 refs 中存储事件处理函数

使用方法

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

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

每个规则文件都包含：

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

完整编译文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown