前端/移动开发面试题更新 2026-08-05

在 React 类组件中,componentWillReceiveProps 生命周期方法会在哪些情况下被触发?

前端/移动开发技术原理React

考察说明

考查对 React 旧生命周期 componentWillReceiveProps 触发机制的理解。

回答思路

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