SuperAPI AI 工具集

react-best-practices

前端与建站

查看项目

更新于 10-16 07:28

技能介绍

用途:这是一个用于 React 与 Next.js 应用的性能优化指南技能,适用于编写新组件或页面、实现数据获取、审查性能问题、重构代码、优化打包体积与加载时间等场景。主要内容为 64 条规则,按优先级分为 8 类。

优先级别:1. 消除瀑布式请求(CRITICAL,async-);2. 打包体积优化(CRITICAL,bundle-);3. 服务端性能(HIGH,server-);4. 客户端数据获取(MEDIUM-HIGH,client-);5. 重渲染优化(MEDIUM,rerender-);6. 渲染性能(MEDIUM,rendering-);7. JavaScript 性能(LOW-MEDIUM,js-);8. 高级模式(LOW,advanced-)。

能力示例:规则包括用 Promise.all() 并行独立操作、避免 barrel 文件直接导入、用 next/dynamic 加载重型组件、用 React.cache() 做单请求去重、用 SWR 自动去重请求、用 startTransition 或 useDeferredValue 处理非紧急更新、用 content-visibility 优化长列表、用 Set/Map 做 O(1) 查找、用 flatMap 一次完成映射与过滤等。

使用方式:可阅读单条规则文件获取详细说明与代码示例,路径形如 rules/async-parallel.md、rules/bundle-barrel-imports.md;每条规则包含重要性说明、错误代码示例、正确代码示例及补充参考。完整指南见 AGENTS.md。

限制:资料未提供该技能的安装命令、版本要求或具体依赖,也未提供收费、价格与效果数据;实际应用效果与兼容平台暂未提供。