react-optimise

React 优化最佳实践

面向 React 应用的应用级性能优化指南。涵盖 8 个类别中的 43 条规则，按影响程度排序，从关键项（React Compiler、包优化）到渐进式改进项（内存管理）。

适用场景

• 优化 React 应用性能或包大小
• 采用或排查 React Compiler v1.0
• 拆分包并配置代码拆分
• 改善 Core Web Vitals（INP、LCP、CLS）
• 分析渲染性能并找出瓶颈
• 修复长期运行的单页应用中的内存泄漏
• 优化数据获取模式并消除瀑布流

规则类别

类别	影响程度	规则数	主要主题
精通 React Compiler	CRITICAL	6	编译器友好型代码、检测提前退出、渐进式采用
包与加载	CRITICAL	6	路由拆分、消除 barrel 文件、动态导入、预取
渲染优化	HIGH	6	虚拟化、children 模式、防抖、CSS containment
数据获取性能	HIGH	5	消除瀑布流、路由预加载、SWR、去重
Core Web Vitals	MEDIUM-HIGH	5	INP 让出主线程、LCP 优先级、避免 CLS、图像优化
状态与订阅性能	MEDIUM-HIGH	5	拆分 Context、选择器、原子状态、派生状态
性能分析与测量	MEDIUM	5	DevTools 性能分析、火焰图、CI 预算、生产构建
内存管理	LOW-MEDIUM	5	Effect 清理、取消异步操作、闭包泄漏、堆分析

快速参考

关键模式——优先做好以下事项：

• 编写编译器友好型组件，以实现自动化的 2-10x 优化
• 在路由边界拆分代码，将初始包大小减少 40-70%
• 消除 barrel 文件，以启用 tree shaking
• 检测并修复编译器静默提前退出

常见错误——避免以下反模式：

• 在渲染期间读取 refs（会破坏编译器优化）
• 只用一个函数，却导入整个库
• 优化前不进行性能分析（导致优化错了瓶颈）
• 缺少 effect 清理（导致订阅产生内存泄漏）

目录

1. React 编译器精通 — 关键
   • 1.1 检测并修复静默的编译器回退 — 关键（避免丢失自动记忆化）
   • 1.2 将副作用与渲染隔离，确保编译器正确性 — 关键（避免编译器生成错误的缓存输出）
   • 1.3 采用编译器后移除手动记忆化 — 关键（组件文件的代码量减少 20-40%）
   • 1.4 使用指令逐步采用编译器 — 关键（无需迁移整个代码库即可安全推出）
   • 1.5 使用支持编译的 ref 访问模式 — 关键（保持对使用 ref 的组件进行编译器优化）
   • 1.6 编写对编译器友好的组件模式 — 关键（实现 2-10 倍的自动渲染优化）
2. 打包与加载 — 关键
   • 2.1 配置依赖项以实现有效的 Tree Shaking — 关键（消除依赖项中 50-90% 的无用代码）
   • 2.2 移除 Barrel 文件以启用 Tree Shaking — 关键（消除 200-800ms 的导入开销）
   • 2.3 使用分析工具强制执行包体积预算 — 关键（防止包体积逐渐回退）
   • 2.4 在交互时预取可能访问的后续路由 — 关键（感知导航速度提升 200-1000ms）
   • 2.5 使用 React.lazy 在路由边界拆分代码 — 关键（初始包体积减少 40-70%）
   • 2.6 对大型库使用动态导入 — 关键（从关键路径中移除 100-500KB）
3. 渲染优化 — 高
   • 3.1 避免在 JSX 属性中内联创建对象 — 高（避免子组件不必要的重新渲染）
   • 3.2 对昂贵的派生计算进行防抖 — 高（每次按键可节省 50-200ms）
   • 3.3 使用 CSS containment 隔离布局重算 — 高（布局重算减少 60-90%）
   • 3.4 使用 children 模式防止父组件重新渲染 — 高（消除静态子树的重新渲染）
   • 3.5 使用稳定的 key 提升列表渲染性能 — 高（将 DOM 变更从 O(n) 降至 O(1) 次移动）
   • 3.6 使用 TanStack Virtual 虚拟化长列表 — 高（将 DOM 节点数从 O(n) 降至 O(1)）
4. 数据获取性能 — 高
   • 4.1 在导航或重新获取数据时中止过期请求 — 高（防止显示过期数据）
   • 4.2 对相同的进行中请求去重 — 高（网络请求减少 50-80%）
   • 4.3 消除顺序数据获取瀑布 — 高（页面加载速度提升 2-5 倍）
   • 4.4 在组件挂载前于路由级别预加载数据 — 高（节省 200-1000ms）
   • 4.5 使用 Stale-While-Revalidate 保持缓存新鲜度 — 高（回访用户感知加载时间为 0ms）
5. Core Web Vitals — 中高
   • 5.1 使用 web-vitals 接入真实用户监控 — 中高（实现数据驱动的优化）
   • 5.2 通过响应式尺寸和延迟加载优化图片 — 中高（带宽减少 40-70%）
   • 5.3 通过让出主线程优化 Interaction to Next Paint — 中高（将 INP 从 500ms 以上降至 200ms 以下）
   • 5.4 通过优先加载优化 Largest Contentful Paint — 中高（LCP 提升 200-1000ms）
   • 5.5 通过预留尺寸防止 Cumulative Layout Shift — 中高（将 CLS 从 0.25 以上降至 0.1 以下）
6. 状态与订阅性能 — 中高
   • 6.1 派生状态而非同步状态，实现零额外渲染 — 中高（消除双重渲染周期）
   • 6.2 将服务端状态与客户端状态管理分离 — 中高（状态管理代码减少 40%）
   • 6.3 拆分 Context，隔离高频更新 — 中高（重新渲染次数减少 5-50 倍）
   • 6.4 使用原子状态管理相互独立的响应式值 — 中高（不必要的重新渲染减少 3-10 倍）
   • 6.5 使用基于选择器的订阅实现细粒度更新 — 中高（将重新渲染限制在受影响的组件）
7. 性能分析与测量 — 中
   • 7.1 仅使用生产构建进行基准测试 — 中（避免开发模式开销导致误报）
   • 7.2 在 CI 中强制执行性能预算 — 中（在合并前发现 90% 的性能问题）
   • 7.3 先进行性能分析，再优化真实瓶颈 — 中（优化工作效率提升 10 倍）
   • 7.4 阅读火焰图，识别渲染热点路径 — 中（找出导致 80% 渲染耗时的具体函数）
   • 7.5 使用 React Performance Tracks 分析渲染 — 中（几分钟内定位渲染瓶颈）
8. 内存管理 — 中低
   • 8.1 避免事件处理器中的闭包导致内存泄漏 — 中低（防止保留 MB 级内存）
   • 8.2 在卸载时取消异步操作 — 中低（防止过期更新和内存保留）
   • 8.3 清理 Effect，防止订阅导致内存泄漏 — 中低（防止内存线性增长）
   • 8.4 在清理函数中释放大型资源 — 中低（防止每项资源保留 5-50MB 内存）
   • 8.5 使用堆快照检测组件滞留 — 中低（识别 10-100MB 的内存增长）

参考资料

1. https://react.dev
2. https://react.dev/blog/2025/10/07/react-compiler-1
3. https://web.dev/articles/vitals
4. https://tanstack.com/virtual
5. https://developer.chrome.com/docs/devtools/performance

相关技能

• 有关 React 19 API 最佳实践，请参阅 react 技能
• 有关 Next.js App Router 优化，请参阅 nextjs-16-app-router 技能
• 有关客户端表单处理，请参阅 react-hook-form 技能