前端/移动开发面试题更新 2026-08-05

请说明 React 类组件中各个生命周期函数的作用,并说明它们分别在什么阶段被调用。

前端/移动开发技术原理React

考察说明

考查对 React 类组件生命周期函数的理解与掌握程度。

回答思路

  1. 【回答框架 1】React 类组件的生命周期主要分为三个阶段:挂载阶段、更新阶段和卸载阶段。挂载阶段依次调用 constructor、getDerivedStateFromProps、render 和 componentDidMount;更新阶段在 props 或 state 变化时调用 getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate 和 componentDidUpdate;卸载阶段调用 componentWillUnmount。
  2. 【回答框架 2】constructor 用于初始化 state 和绑定事件处理函数,但不能调用 setState;render 是纯函数,返回要渲染的 JSX,不应有副作用;componentDidMount 在组件挂载后执行,适合发起网络请求或操作 DOM;componentDidUpdate 在更新后执行,可比较前后 props 或 state 并作出响应,但需注意避免无限更新。
  3. 【回答框架 3】getDerivedStateFromProps 是静态方法,用于根据 props 更新 state,但应谨慎使用,因为它容易引起状态不一致;shouldComponentUpdate 用于性能优化,返回 false 可跳过本次更新,但不会阻止子组件更新;getSnapshotBeforeUpdate 在 DOM 更新前获取快照,返回值作为 componentDidUpdate 的第三个参数。
  4. 【回答框架 4】React 16.3 之后,componentWillMount、componentWillReceiveProps、componentWillUpdate 等旧生命周期被标记为不安全,推荐使用新的生命周期方法。在新项目中应避免使用这些旧方法。
  5. 【关键点 1】生命周期分为挂载、更新、卸载三个阶段。
  6. 【关键点 2】componentDidMount 适合做异步请求和 DOM 操作。
  7. 【关键点 3】getDerivedStateFromProps 应谨慎使用,避免状态不一致。
  8. 【关键点 4】shouldComponentUpdate 可用于性能优化。
  9. 【关键点 5】旧生命周期方法不安全,应使用新方法替代。
  10. 【易错点 1】在 componentDidUpdate 中直接 setState 可能导致无限循环。
  11. 【易错点 2】getDerivedStateFromProps 的返回值会覆盖当前 state,可能导致不可预期问题。
  12. 【易错点 3】混淆旧生命周期和新生命周期的适用场景。