# React 优化最佳实践 React 应用程序的应用程序级性能优化指南。包含 8 个类别的 43 条规则，按从关键（React 编译器、捆绑优化）到增量（内存管理）的影响进行优先级排序。 ## 何时申请 * 优化 React 应用程序性能或包大小 * 采用 React Compiler v1.0 或对其进行故障排除 * 拆分捆绑包并配置代码拆分 * 改善核心网络生命体（INP、LCP、CLS） * 分析渲染性能并识别瓶颈 * 修复长期单页应用程序中的内存泄漏 * 优化数据获取模式并消除瀑布 ## 规则类别类别 |影响 |规则|重点议题 ---|---|---|--- 精通 React 编译器 |关键 | 6 |编译器友好的代码、救助检测、增量采用捆绑和装载|关键 | 6 |路由分割、桶消除、动态导入、预取渲染优化 |高| 6 |虚拟化、儿童模式、去抖动、CSS 遏制数据获取性能|高| 5 |瀑布消除、路由预加载、SWR、重复数据删除核心网络生命力 |中高| 5 | INP 屈服、LCP 优先、CLS 预防、图像优化状态和订阅性能 |中高| 5 |上下文分割、选择器、原子状态、派生状态分析与测量 |中 | 5 | DevTools 分析、火焰图、CI 预算、生产构建内存管理|低-中| 5 |效果清理、异步取消、闭包泄漏、堆分析 ## 快速参考 **关键模式** — 首先正确解决这些问题： * 编写编译器友好的组件以解锁自动 2-10 倍优化 * 在路线边界处拆分代码，以将初始捆绑减少 40-70% *消除桶文件以启用tree shake * 检测并修复静默编译器救援 **常见错误** — 避免这些反模式： * 在渲染期间读取引用（破坏编译器优化） * 仅使用一个函数时导入整个库 * 优化前不进行分析（针对错误的瓶颈） * 缺失效果清理（订阅内存泄漏） ## 目录 1. [React 编译器掌握]() — **关键** * 1.1 [检测并修复静默编译器救援]() — 关键（防止丢失自动记忆） * 1.2 [从渲染中隔离副作用以保证编译器的正确性]() — 关键（防止编译器生成不正确的缓存输出） * 1.3 [采用编译器后删除手动记忆]() — 关键（组件文件中的代码减少了 20-40%） * 1.4 [通过指令使用增量编译器采用]() — 关键（无需完整代码库迁移即可安全推出） * 1.5 [使用启用编译的引用访问模式]() — 关键（维护引用使用组件的编译器优化） * 1.6 [编写编译器友好的组件模式]() — 关键（2-10 倍自动渲染优化） 2. [捆绑和加载]() — **关键** * 2.1 [配置依赖项以实现有效的 Tree Shaking]() — 关键（依赖项中消除了 50-90% 的死代码） * 2.2 [消除桶文件以启用 Tree Shaking]() — 关键（消除了 200-800 毫秒的导入成本） * 2.3 [使用分析工具强制执行捆绑包大小预算]() — 关键（防止捆绑包大小逐渐回归） * 2.4 [在交互时预取可能的下一个路由]() — 关键（感知导航速度加快 200-1000 毫秒） * 2.5 [使用 React.lazy 在路由边界分割代码]() — 关键（初始包大小减少 40-70%） * 2.6 [对重型库使用动态导入]() — 关键（从关键路径中删除了 100-500KB） 3. [渲染优化]() — **高** * 3.1 [避免在 JSX Props 中创建内联对象]() — 高（防止不必要的子重新渲染） * 3.2 [Debounce 昂贵的派生计算]() — 高（每次击键节省 50-200 毫秒） * 3.3 [使用 CSS Containment 隔离布局重新计算]() — 高（布局重新计算减少 60-90%） * 3.4 [使用子模式防止父模式重新渲染]() — HIGH（消除静态子树的重新渲染） * 3.5 [使用稳定的键来提高列表渲染性能]() — 高（O(n) DOM 突变到 O(1) 次移动） * 3.6 [使用 TanStack Virtual 虚拟化长列表]() — 高（O(n) 到 O(1) DOM 节点） 4. [数据获取性能]() — **高** * 4.1 [在导航或重新获取时中止陈旧请求]() — HIGH（防止陈旧数据显示） * 4.2 [重复删除相同的运行中请求]() — 高（网络请求减少 50-80%） * 4.3 [消除顺序数据获取瀑布]() — 高（页面加载速度加快 2-5 倍） * 4.4 [在组件安装之前在路由级别预加载数据]() — 高（消除了 200-1000 毫秒） * 4.5 [使用 Stale-While-Revalidate 来保持缓存新鲜度]() — 高（回访者感知负载为 0 毫秒） 5. [核心 Web Vitals]() — **中-高** * 5.1 [使用 web-vitals 进行仪器真实用户监控]() — 中-高（启用数据驱动优化） * 5.2 [通过响应式大小调整和延迟加载优化图像]() — 中-高（带宽减少 40-70%） * 5.3 [优化与下一次绘制的交互并产生屈服]() — 中-高（INP 从 500ms+ 到 200ms 以下） * 5.4 [优化最大内容绘制并优先加载]() — 中-高（200-1000ms LCP 改进） * 5.5 [通过大小预留防止累积布局变化]() — 中-高（CLS 从 0.25+ 到 0.1 以下） 6. [状态和订阅性能]() — **中-高** * 6.1 [导出状态而不是同步零额外渲染]() — 中-高（消除双渲染周期） * 6.2 [将服务器状态与客户端状态管理分开]() — 中-高（减少状态管理代码 40%） * 6.3 [拆分上下文以隔离高频更新]() — 中-高（重新渲染次数减少 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 [清理效果以防止订阅内存泄漏]() — 低-中（防止线性内存增长） * 8.4 [在清理函数中释放大量资源]() — 低-中（防止每个资源保留 5-50MB） * 8.5 [使用堆快照检测组件保留]() — 低-中（识别 10-100MB 内存增长） ## 参考文献 1. 2. 3. 4. 5. ## 相关技能 * React 19 API 最佳实践请参见“react”技能 * Next.js App Router 优化请参见 `nextjs-16-app-router` 技巧 * 客户端表单处理参见`react-hook-form`技巧

反应优化

包含技能