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