为何componentWillReceiveProps未被调用？子组件监听父组件状态求助

我帮你梳理几个最常见的原因，以及对应的解决思路：

1. 父组件传递的dataset引用没变化，仅内部属性更新 #

React对props的比较是浅比较——如果父组件只是修改了dataset对象里的showDeleteAll属性，但dataset本身的内存引用没改变，React会判定props没有变化，自然不会触发componentWillReceiveProps。

举个错误的反例：

// 父组件直接修改state对象内部属性，未改变引用
this.state.dataset.showDeleteAll = true;
this.setState({ dataset: this.state.dataset });

正确做法是创建新对象，让引用发生变化：

// 父组件更新state的正确方式
this.setState(prevState => ({
  dataset: {
    ...prevState.dataset,
    showDeleteAll: true // 更新目标属性
  }
}));

2. 父组件本身没有重新渲染 #

如果父组件的state或props没发生任何变化，它自身不会重新渲染，自然不会把新props传递给子组件，componentWillReceiveProps也就不会触发。

你可以先在父组件的render方法里加个console.log，确认父组件是否在你预期的时机重新渲染了。如果父组件没渲染，问题就出在父组件的更新逻辑上。

3. 注意：componentWillReceiveProps已经过时 #

顺便提一句，从React 16.3开始，componentWillReceiveProps已被标记为过时API，官方推荐用componentDidUpdate或getDerivedStateFromProps替代。比如用componentDidUpdate监听props变化：

componentDidUpdate(prevProps) {
  // 对比前后props的变化
  if (prevProps.dataset.showDeleteAll !== this.props.dataset.showDeleteAll) {
    this.setState({ show: this.props.dataset.showDeleteAll });
  }
}

4. 子组件是PureComponent，浅比较props无变化则不更新 #

如果你的子组件继承的是React.PureComponent而非React.Component，它会自动做props浅比较，一旦判定props无变化，就会跳过更新流程，componentWillReceiveProps自然也不会被调用。这种情况同样需要确保父组件传递的props引用是新的。

内容的提问来源于stack exchange，提问作者simo