面试题：React 中不同生命周期阶段对性能调优的影响

Question

请阐述 React 生命周期中 `componentDidMount`、`shouldComponentUpdate` 和 `componentDidUpdate` 这几个阶段在性能调优方面分别起到什么作用，以及在这些阶段可以采取哪些常见的性能优化措施？

Answer 1

componentDidMount

• 性能调优作用：此阶段组件已挂载到 DOM 上，可进行一些只需要执行一次的操作，避免在后续频繁渲染中重复执行，从而提升性能。比如初始化第三方库、订阅事件等，防止这些操作在不必要的渲染中反复执行。
• 常见优化措施：
  • 数据请求：在此阶段发起数据请求，减少在渲染阶段因数据获取导致的阻塞或不必要的重新渲染。例如使用 fetch 或 axios 进行网络请求获取数据，避免在 render 中发起请求。
  • 初始化第三方库：像初始化 chart.js 等图表库，由于初始化操作开销大，只在 componentDidMount 执行一次，而不是每次渲染都初始化。

shouldComponentUpdate

• 性能调优作用：该方法决定组件是否需要更新，通过合理判断，可避免不必要的重新渲染，极大提升性能。当组件的 props 或 state 变化较频繁时，此方法能过滤掉无实际影响的变化，防止多余的渲染。
• 常见优化措施：
  • 浅比较：使用 Object.is 或 lodash 的 isEqual 对新老 props 和 state 进行浅比较。例如简单对象属性变化判断，若只是对象引用未变，属性值变化不影响显示，可返回 false 阻止更新。
  • 自定义逻辑判断：根据业务逻辑判断是否需要更新。比如一个列表组件，当新的 props 中排序字段未改变时，返回 false 不更新列表渲染。

componentDidUpdate

• 性能调优作用：在组件更新后执行，可在此处处理一些依赖于更新后 DOM 状态的操作，并且可以避免在更新过程中进行不必要的重复操作。例如在更新后重新计算一些布局相关的值，若在每次渲染都计算会造成性能浪费。
• 常见优化措施：
  • 避免重复操作：对比更新前后的 props 或 state，仅在有实际变化时执行某些操作。比如一个根据 props 变化更新图表数据的组件，对比新旧 props 数据，只有数据变化才更新图表，防止不必要的图表重绘。
  • 节流与防抖：对于一些频繁触发更新的场景，如窗口 resize 事件在更新后触发，可使用节流（throttle）或防抖（debounce）技术，限制操作执行频率，提升性能。