React.js中如何进行性能调优

React 性能调优实战清单

一 渲染层优化

• 避免不必要的重渲染
  • 使用 React.memo 包裹纯展示组件，默认进行浅比较；若 props 为对象/数组，确保引用稳定或用自定义比较函数。类组件可用 React.PureComponent 或实现 shouldComponentUpdate 做细粒度控制。
  • 用 useMemo 缓存昂贵计算（排序、过滤、转换），用 useCallback 缓存函数引用，避免子组件因引用变化而被动重渲染。
  • 拆分组件边界，缩小重渲染范围；将频繁变化的局部状态与全局状态分离，减少“牵一发而动全身”。
  • 列表务必提供稳定且唯一的 key（如业务 id），避免索引导致误判。
  • 优化 Context：按功能拆分多个 Context，Provider 的 value 用 useMemo 记忆化，避免无关更新触发大面积重渲染。

二 数据与状态管理

• 不可变更新：优先使用不可变数据结构更新状态，便于正确比较与最小范围更新（如 { ...state, updated: value }）。
• 状态下沉与合并：将状态下放到使用点，合并频繁联动的状态，减少跨层级传递。
• 复杂状态逻辑：用 useReducer 管理多子状态与复杂流程，减少分散的 setState 引发的多轮渲染。
• 外部状态：大型项目可用 Redux Toolkit / Zustand / Jotai 等，按模块拆分与按需订阅，降低渲染波及。
• 选择器与派生数据：使用 Reselect 创建记忆化选择器，在 Redux 或本地状态中避免无关派生数据重算。

三 资源加载与代码分割

• 路由级懒加载：用 React.lazy + Suspense 做代码分割，仅当路由进入视口再加载对应 chunk，显著降低首屏体积。
• 组件按需加载：对重量级组件/第三方库采用动态导入，结合 Tree Shaking 剔除未使用代码。
• 构建与传输优化：启用 Tree Shaking、生产模式；使用 Gzip/Brotli 预压缩静态资源；图片采用 WebP/AVIF、响应式与懒加载（如 loading="lazy"）。

四 长列表与大数据量场景

• 虚拟滚动：成千上万条数据使用 react-window / react-virtualized，只渲染可视区域节点，极大减少 DOM 数量与回流重绘。
• 稳定的列表项引用：列表项数据或对象通过 useMemo/useCallback 保持引用稳定，配合 key 正确使用，避免误更新。
• 计算与筛选：对排序、搜索、聚合等昂贵计算使用 useMemo 缓存结果，必要时配合 Web Worker 将计算移出主线程，避免 UI 卡顿。

五 交互与运行时优化

• 批处理与并发特性：在 React 18+ 中默认开启自动批处理，多个状态更新合并为一次渲染；必要时用 flushSync 控制同步刷新时机。
• 防抖与取消请求：对搜索/筛选等高频输入使用防抖（如 300ms），并用 AbortController 取消未完成请求，减少无效渲染与网络压力。
• 性能测量与定位：使用 Chrome DevTools Performance 录制交互火焰图，定位长任务与回流重绘；配合 React DevTools 的 Profiler 识别多余渲染与慢组件。