在 React 类组件中,componentWillReceiveProps 生命周期方法会在哪些情况下被触发?
考察说明
考查对 React 旧生命周期 componentWillReceiveProps 触发机制的理解。
回答思路
- 【回答框架 1】componentWillReceiveProps 是 React 16.3 之前类组件中的生命周期方法,它在组件接收新的 props 时被调用。触发条件是父组件重新渲染导致子组件接收到新的 props,而子组件自身 state 变化或强制更新不会触发该方法。
- 【回答框架 2】需要注意的是,componentWillReceiveProps 并非仅当 props 实际变化时才触发,只要父组件重新渲染,即使传入的 props 值与之前相同,该方法也会被调用,因为无法在调用前得知 props 是否真正改变。
- 【回答框架 3】从 React 16.3 起,该方法被标记为不安全,官方推荐使用 getDerivedStateFromProps 静态方法或 componentDidUpdate 来替代。新方法在每次渲染前都会调用,更安全且避免副作用。
- 【回答框架 4】触发场景包括:父组件状态更新导致重新渲染、父组件通过上下文或 redux 等状态管理库传递新 props。在这些情况下,组件会收到新的 props 对象引用。
- 【回答框架 5】该方法中可以通过对比 this.props 和 nextProps 来判断具体哪些 props 发生变化,从而避免不必要的副作用操作。但需注意,在 constructor 之后,组件初始化时不会调用该方法。
- 【关键点 1】componentWillReceiveProps 在父组件重新渲染导致子组件接收新 props 时触发,与 props 是否实际变化无关。
- 【关键点 2】子组件自身 setState 或 forceUpdate 不会触发该方法。
- 【关键点 3】React 16.3 起该方法不安全,建议使用 getDerivedStateFromProps 或 componentDidUpdate 替代。
- 【易错点 1】误认为只有 props 值变化才触发,实际父组件任何重新渲染都会触发。
- 【易错点 2】在 componentWillReceiveProps 中调用 setState 可能导致额外渲染,需谨慎处理。