Workleap React 最佳实践是一份面向 React 单页应用（SPA）的性能优化指南，针对 Workleap 的 SPA 优先架构量身定制。
适用时机
在以下场景中可参考这些指南：编写新的 React 组件；审查代码中的性能问题；重构现有 React 代码；优化打包体积或加载时间；调试不必要的重渲染。
规则分类与优先级
指南按优先级将规则分为六类，并给出影响程度与对应参考文件：
- 消除瀑布式请求（关键）——async-rules.md
- 打包体积优化（关键）——bundle-rules.md
- 重渲染优化（中等）——rerender-rules.md
- 渲染性能（中等）——rendering-rules.md
- JavaScript 性能（低到中等）——js-rules.md
- 高级模式（低）——advanced-rules.md
快速参考
- 消除瀑布式请求（关键）
瀑布式请求是头号性能杀手，每个顺序 await 都会增加完整的网络延迟。相关规则包括：延迟 await 直到真正需要时（将 await 移入实际使用的分支）；对独立操作使用 Promise.all() 并发执行；基于依赖的并行化（对部分依赖使用 promise 链）；防止瀑布链（尽早启动 promise，延迟 await）。详细规则和代码示例见 references/async-rules.md。
- 打包体积优化（关键）
减小初始打包体积可改善可交互时间（Time to Interactive）和最大内容绘制（Largest Contentful Paint）。相关规则包括：基于路由的代码分割（懒加载每个路由，用户只下载访问到的代码）；避免桶文件导入（直接从源文件导入，而非桶式再导出）；对重型组件使用 React.lazy（懒加载初始渲染不需要的大组件）；条件模块加载（仅在功能激活时加载模块）；基于用户意图预加载（在 hover/focus 时预加载重型包）。详细规则和代码示例见 references/bundle-rules.md。
- 重渲染优化（中等）
减少不必要的重渲染可最小化浪费的计算并提升 UI 响应性。相关规则包括：延迟状态读取（不要订阅仅在回调中使用的状态）；提取到记忆化组件（在计算前启用提前返回）；提升默认非原始类型 props（将默认值提取为常量以获得稳定的 memo）；收窄 effect 依赖（在 effect 中使用原始类型依赖）；订阅派生状态（订阅派生的布尔值而非原始值）；在渲染期间计算派生状态（在渲染期间派生状态，而非在 effect 中）；函数式 setState（使用函数式 setState 获得稳定回调）；惰性状态初始化（对昂贵值向 useState 传入函数）；简单表达式跳过 useMemo（避免对简单原始值使用 memo）；将逻辑放入事件处理器（把交互逻辑放在事件处理器中，而非 effect 中）；非紧急更新使用过渡（对非紧急更新使用 startTransition）；瞬态值使用 useRef（对频繁变化的瞬态值使用 ref）。详细规则和代码示例见 references/rerender-rules.md。
- 渲染性能（中等）
优化渲染过程可减少浏览器需要执行的工作。相关规则包括：为 SVG 包裹层做动画（对 div 包裹层做动画，而非 SVG 元素）；CSS content-visibility（对长列表使用 content-visibility）；提升静态 JSX（将静态 JSX 提取到组件外部）；优化 SVG 精度（降低 SVG 坐标精度）；Activity 组件（实验性）（使用 Activity 实现带状态保留的显示/隐藏）；显式条件渲染（条件渲染使用三元表达式，而非 &&）；加载使用 useTransition（优先使用 useTransition 而非手动 loading 状态）。详细规则和代码示例见 references/rendering-rules.md。
- JavaScript 性能（低到中等）
针对热路径的微优化，累积起来可带来有意义的改进。相关规则包括：避免布局抖动（批量 DOM 写入，避免交错读取）；构建索引映射（对重复查找使用 Map）；缓存属性访问（在循环中缓存对象属性）；缓存函数结果（在模块级 Map 中缓存重复函数调用）；缓存 Storage API 调用（缓存 localStorage/sessionStorage 读取）；合并数组迭代（将多个 filter/map 合并为一个循环）；提前长度检查（在昂贵比较前检查数组长度）；提前返回（从函数中提前返回）；提升 RegExp（将 RegExp 创建提升到循环外）；循环求最小/最大值（用循环代替 sort 求最小/最大值）；Set/Map 查找（使用 Set/Map 实现 O(1) 查找）；toSorted() 不可变性（使用 toSorted() 防止变更 bug）。详细规则和代码示例见 references/js-rules.md。
- 高级模式（低）
适用于需要谨慎实现的特定场景的高级模式。相关规则包括：事件处理器 ref（将事件处理器存储在 ref 中以获得稳定订阅）；仅初始化一次（应用每次加载初始化一次，而非每次挂载）；稳定回调 ref（为无需重跑的 effect 提供稳定回调 ref）。详细规则和代码示例见 references/advanced-rules.md。
限制与补充说明
该指南为性能优化规则集合，具体实现细节、代码示例和完整规则需查阅各参考文件（async-rules.md、bundle-rules.md、rerender-rules.md、rendering-rules.md、js-rules.md、advanced-rules.md）。关于安装方式、收费模式、支持平台等信息，资料中暂未提供。