SuperAPI AI 工具集

vercel-react-best-practices

编程与开发

查看项目

更新于 10-15 23:59

技能介绍

用途:该技能提供一套面向 React 与 Next.js 应用的性能优化规则,适用于编写新组件或页面、实现客户端或服务端数据获取、审查性能问题、重构既有代码,以及优化包体积和加载时间。

主要能力:包含 69 条规则,分为 8 个类别并按影响优先级排序,每条规则带前缀,便于自动重构与代码生成时引用:

  1. 消除瀑布流(CRITICAL,async-),如 async-parallel 用 Promise.all() 处理独立操作、async-suspense-boundaries 用 Suspense 流式传输内容;
  2. 包体积优化(CRITICAL,bundle-),如避免 barrel 文件直接导入、用 next/dynamic 加载重组件、hydration 后再加载分析/日志;
  3. 服务端性能(HIGH,server-),如用 React.cache() 做每请求去重、LRU 跨请求缓存、减少传给客户端组件的数据、用 after() 处理非阻塞操作;
  4. 客户端数据获取(MEDIUM-HIGH,client-),如用 SWR 自动去重请求、去重全局事件监听、滚动使用 passive 监听;
  5. 重渲染优化(MEDIUM,rerender-),如用 memo 提取昂贵工作、使用派生布尔值订阅、在渲染期派生状态而非用 effect;
  6. 渲染性能(MEDIUM,rendering-),如用 content-visibility 处理长列表、将静态 JSX 提出组件、条件渲染用三元而非 &&;
  7. JavaScript 性能(LOW-MEDIUM,js-),如用 Map 做重复查找、循环内缓存属性、合并 filter/map;
  8. 高级模式(LOW,advanced-),如初始化仅一次、用 useLatest 稳定回调引用。

使用方式:按规则前缀查阅对应规则的独立文件,例如 rules/async-parallel.md、rules/bundle-barrel-imports.md,每个文件包含原因说明、错误代码示例及解释、正确代码示例及解释、补充背景与参考。完整展开版见 AGENTS.md。

适用场景:React/Next.js 的日常开发、代码评审、自动化重构与生成、性能与包体积优化。

限制:资料未提供安装命令、价格、平台限制等信息,暂未提供。