react-best-practices - React性能优化指南
为React和Next.js应用提供8个分类共57条优化规则
标签
更新于: 2026-03-21能力
典型输入
典型输出
该技能可以做什么
- 审查React组件
- 优化包体积
- 消除数据获取瀑布
- 重构以提高重渲染效率
- 实现数据获取
- 编写React组件
- 编写Next.js页面
- 缓存数据
- 去重请求
- 使用Promise.all()
- 使用Suspense边界
- 使用动态导入
- 使用React.cache()
- 使用LRU缓存
- 去重事件监听器
- 最小化localStorage数据
- 提取记忆化组件
- 使用startTransition
- 使用refs存储值
- 组合CSS变更
输入
- React组件
- Next.js页面
- 包体积数据
- 性能指标
- 数据获取模式
输出
- 优化的React组件
- 优化的Next.js页面
- 性能建议
- 重构的代码示例
要求
- React应用
- Next.js应用
- Sonnet模型