跳到主要内容

在实际工作中，对React做过哪些优化

面试速答​

  • 以下内容以 React 18 为准。
  • 这题最好别答成“我用了 useMemo 和 useCallback”，那样太浅。
  • 更像工程回答的方式是按层次讲：
    • 先定位瓶颈
    • 再控制渲染范围
    • 再做数据层和资源层优化
    • 最后补监控闭环

一、先定位，再优化​

我通常会先看：

  • React DevTools Profiler
  • 浏览器 Performance 面板
  • Web Vitals
  • 埋点里的慢页、卡顿和错误数据

因为很多“优化”其实只是主观猜测。

二、渲染层优化​

1. 减少不必要重渲染​

常见做法：

  • 把状态尽量放在真正需要它的最近层级
  • 避免父组件状态一变整棵树都跟着刷新
  • 长列表拆分 item，并保证 key 稳定

2. 合理使用记忆化​

我只在这些场景里用：

  • 昂贵计算用 useMemo
  • 传给 React.memo 子组件的回调用 useCallback
  • 纯展示组件用 React.memo

如果组件很轻，记忆化本身也有成本，不会默认全加。

3. 列表和大组件拆分​

比如：

  • 虚拟列表
  • 懒加载弹窗和图表
  • 重组件按路由或功能分包

三、状态层优化​

1. 避免状态设计过粗​

如果把很多无关字段堆在一个大对象里，任何字段变化都可能触发大范围渲染。

2. 区分服务端状态和本地状态​

请求结果、缓存、重试、失效控制这类问题，通常交给专门的数据层方案，比手写 useEffect + useState 更稳。

3. React 18 的优先级能力​

重计算筛选、搜索结果刷新这类更新，我会考虑：

  • startTransition
  • useDeferredValue

把输入响应和重列表刷新拆开。

四、资源和构建层优化​

常做的还有：

  • 路由级代码分割
  • 大依赖按需加载
  • 图片压缩与懒加载
  • 分析 bundle，去掉重复依赖

五、稳定性优化​

真实项目里性能和稳定性经常是一起做的：

  • 错误边界兜底
  • 统一异常上报
  • 慢接口和慢组件监控
  • 关键交互耗时埋点

标准答法​

问：实际工作中你做过哪些 React 优化？​

答：我会从定位、渲染、状态、资源、监控五层来做。先用 Profiler 找到高频重渲染点，再通过状态下沉、组件拆分、记忆化、列表虚拟化、代码分割和 React 18 的优先级更新能力去优化，最后靠监控验证收益。

易错点​

  • 把优化答成背 Hook 名单。
  • 不分“真瓶颈”和“感觉慢”。
  • 只谈首屏，不谈交互卡顿和错误恢复。

速记要点​

  • 先测量，后优化。
  • 优先控制渲染范围和状态边界。
  • 优化要有监控闭环，不是只改代码。