react-best-practices

React 最佳实践

适用于 Cloud UI 的客户端 React 优化模式。共 29 条规则，按类别和影响程度组织。

适用场景

• 性能优化任务
• 组件重复渲染问题
• 包体积问题
• useEffect/useMemo 模式

按类别划分的规则

包优化（CRITICAL）

规则	要点
bundle-barrel-imports	从源文件导入，而不是从 barrel index.ts 导入
bundle-code-splitting	对大型组件使用 React.lazy + Suspense，按条件加载，并延迟加载第三方依赖
bundle-preload	预加载关键资源

避免重复渲染（HIGH）

规则	要点
rerender-memo	对开销较大的计算进行记忆化
rerender-dependencies	尽量缩小 Hook 依赖数组
rerender-derived-state	在渲染期间计算，而不是在 effect 中计算
rerender-functional-setstate	使用 setState(prev => ...) 避免闭包过期
rerender-lazy-state-init	使用 useState(() => expensive())，而不是 useState(expensive())
rerender-simple-expression-in-memo	不要对简单表达式进行记忆化
rerender-transitions	对非紧急更新使用 useTransition
rerender-defer-reads	在回调中读取 URL 参数 / 存储，而不是在渲染时读取

渲染（MEDIUM）

规则	要点
rendering-conditional-render	使用 && / 三元运算符进行短路判断，避免在 effect 中渲染
rendering-hoist-jsx	将静态 JSX 移到组件外部
rendering-content-visibility	对屏幕外内容使用 CSS content-visibility: auto
rendering-activity	对隐藏 UI 使用 React <Activity>
rendering-animate-svg-wrapper	为动画 SVG 添加包装器，以隔离重复渲染
rendering-svg-precision	限制 SVG 坐标精度

异步（MEDIUM）

规则	要点
async-suspense-boundaries	使用细粒度的 <Suspense> 边界
async-defer-await	不要等待非阻塞任务完成
async-dependencies	并行加载依赖，而不是依次加载

JavaScript（MEDIUM）

规则	要点
js-caching-patterns	使用模块级 Map 缓存重复调用和存储读取结果
js-batch-dom-css	批量执行 DOM 读取 / 写入，避免布局抖动
js-index-maps	预先将数组索引到 Map 中，实现 O(1) 查找
js-length-check-first	在执行开销较大的操作前检查 .length
js-tosorted-immutable	使用 .toSorted() / .toReversed() 进行不可变转换

Biome 会强制执行正则表达式提升规则（useTopLevelRegex）。

浏览器（MEDIUM）

规则	要点
client-event-listeners	在 useEffect 的返回函数中清理事件监听器
client-passive-event-listeners	为滚动 / 触摸处理器设置 { passive: true }

进阶（LOW）

规则	要点
advanced-event-handler-refs	使用稳定的回调 ref，避免子组件重复渲染
advanced-use-latest	使用 useLatest 模式，确保回调中的值始终为最新值