SuperAPI AI 工具集

react-best-practices

前端与建站

查看项目

更新于 10-15 23:31

技能介绍

用途:在编写或审查 React/Next.js 组件(TSX/JSX)时触发,检查组件结构、Hooks 用法、无障碍与性能,并指导自动化重构与代码生成。

主要能力:基于 Vercel 维护的 React 最佳实践,包含 8 个类别、共 64 条规则,按影响程度排序,每类带前缀与对应参考文件:消除瀑布流(async-,CRITICAL)、包体积优化(bundle-,CRITICAL)、服务端性能(server-,HIGH)、客户端数据获取(client-,MEDIUM-HIGH)、重渲染优化(rerender-,MEDIUM)、渲染性能(rendering-,MEDIUM)、JavaScript 性能(js-,LOW-MEDIUM)、高级模式(advanced-,LOW)。

使用方式:参考文件按需加载(渐进式披露),仅在任务需要该深度时读取对应文件。例如处理异步数据流、await 链、API 路由或 Server Actions 时读 eliminating-waterfalls.md;减少包体积、代码分割或添加第三方/分析脚本时读 bundle-size.md;编写 Server Components、Server Actions 或 RSC 数据获取时读 server-performance.md;客户端获取、绑定 window/document 监听或持久化存储时读 client-data-fetching.md;诊断或预防不必要重渲染与 effect 抖动时读 rerender-optimization.md;优化渲染开销、水合闪烁、SVG/动画或 script/preload 标签时读 rendering-performance.md;优化热循环或数据结构密集的 JS 时读 javascript-performance.md;稳定回调标识或保证一次性初始化时读 advanced-patterns.md。

适用场景:React 与 Next.js 应用的性能优化、代码审查与重构建议。

限制:资料未提供安装命令、收费方式、支持平台与具体效果数据,暂未提供。