React 最佳实践
面向 React 应用的综合性能优化指南。包含 7 个类别共 37 条规则，按影响优先级排序。
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布请求 | 关键 | async- |
| 2 | 包体积优化 | 关键 | bundle- |
| 3 | 客户端数据获取 | 中高 | client- |
| 4 | 重渲染优化 | 中等 | rerender- |
| 5 | 渲染性能 | 中等 | rendering- |
| 6 | JavaScript 性能 | 低中 | js- |
| 7 | 高级模式 | 低 | advanced- |
快速参考
1. 消除瀑布请求（关键）
async-defer-await- 将 await 移至实际使用的分支中async-parallel- 对独立操作使用 Promise.all()/allSettled()
2. 包体积优化（关键）
bundle-dynamic-imports- 对重量级组件使用 React.lazy()bundle-defer-third-party- 按需加载分析/日志模块bundle-conditional- 仅在功能激活时加载模块bundle-preload- 在悬停/聚焦时预加载以提升感知速度
3. 客户端数据获取（中高）
client-query-dedup- 使用 TanStack Query 自动去重请求client-event-listeners- 去重全局事件监听器client-passive-event-listeners- 对滚动性能使用被动监听器client-localstorage-schema- 对 localStorage 数据进行版本控制和最小化
4. 重渲染优化（中等）
rerender-defer-reads- 不要订阅仅在回调中使用的状态rerender-memo- 将昂贵计算提取到带 memo 的组件中rerender-dependencies- 在 effect 中使用原始类型依赖rerender-derived-state- 订阅派生后的布尔值，而非原始值rerender-functional-setstate- 使用函数式 setState 保持回调稳定rerender-lazy-state-init- 对昂贵初始值向 useState 传入函数rerender-transitions- 对非紧急更新使用 startTransition
5. 渲染性能（中等）
rendering-animate-svg-wrapper- 动画作用于 div 包装器，而非 SVG 元素本身rendering-content-visibility- 对长列表使用 content-visibilityrendering-hoist-jsx- 将静态 JSX 提取到组件外部rendering-svg-precision- 降低 SVG 坐标精度rendering-activity- 使用 Activity 组件控制显示/隐藏rendering-conditional-render- 条件渲染使用三元运算符，而非 &&
6. JavaScript 性能（低中）
js-batch-dom-css- 通过 class 或 cssText 批量应用 CSS 变更js-index-maps- 对重复查找构建 Mapjs-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- 使用循环求最小/最大值，而非 sortjs-set-map-lookups- 使用 Set/Map 实现 O(1) 查找js-tosorted-immutable- 使用 toSorted() 保持不可变性
7. 高级模式（低）
advanced-event-handler-refs- 将事件处理函数存储在 ref 中advanced-use-latest- 使用 useLatest 保持回调引用稳定
使用方法
每个规则文件位于 references/ 目录下，包含：解释、正确/错误代码示例以及上下文。根据需要阅读单个文件即可。