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

Question

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

Answer 1

componentWillMount

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

getDerivedStateFromProps

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

constructor

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