面试题答案
一键面试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 调用或其他有副作用的操作。