MST

星途 面试题库

面试题:React 新旧生命周期方法在组件挂载阶段的对比

请详细阐述 React 旧生命周期中 componentWillMount 与新生命周期中 getDerivedStateFromProps 和 constructor 在组件挂载阶段的作用、调用时机以及使用场景的区别。
16.9万 热度难度
前端开发React

知识考点

AI 面试

面试题答案

一键面试

componentWillMount

  • 作用:在组件即将挂载到 DOM 之前执行。可用于在渲染前执行一些初始化操作,比如设置默认状态(虽然更推荐在 constructor 里做)、发起数据请求等。
  • 调用时机:在组件挂载到 DOM 之前调用,且只会被调用一次。
  • 使用场景:早期用于在组件挂载前获取数据,但由于 React 后续更新引入了异步渲染等机制,该方法在异步渲染下可能会被多次调用,所以不推荐在此处发起网络请求。

getDerivedStateFromProps

  • 作用:根据 props 来更新 state,它是一个静态方法。其设计目的是让组件在接收到新 props 时更新 state,以保持 stateprops 的一致性。
  • 调用时机:在组件挂载以及更新时,每次接收到新的 props 都会调用,即在 render 方法之前调用。
  • 使用场景:当 state 的值在任何时候都依赖于 props 时使用。例如,根据传入的 props 初始化 state,或者当 props 变化时同步更新 state。但要注意避免在此方法中进行副作用操作,因为它是静态方法。

constructor

  • 作用:主要用于初始化 state,以及为事件处理函数绑定实例。它是 ES6 类组件创建和初始化时调用的方法。
  • 调用时机:在组件创建时,且仅调用一次,在 render 方法之前调用。
  • 使用场景:初始化 state,如果有需要绑定 this 的事件处理函数,可在 constructor 中进行绑定。例如 this.handleClick = this.handleClick.bind(this)。不要在 constructor 中进行 API 调用或其他有副作用的操作。