React 16.4中setState触发componentWillReceiveProps异常问题咨询

这是因为React 16.3及后续版本对componentWillReceiveProps的触发逻辑做了关键调整，和React 15的行为存在明显差异。

核心原因 #

在React 15中，componentWillReceiveProps仅会在组件的props发生变化时被调用。但从React 16.3开始，这个生命周期方法的触发条件被扩展：当组件所依赖的上下文（context）发生变化时，即使props完全没有更新，它也会被触发。你的场景里，点击按钮调用setState时，虽然组件自身的props没变化，但上下文可能悄悄发生了更新。

可能的触发场景 #

为什么setState会导致上下文变化？通常有两种情况：

• 你的TestCompo被包裹在某个使用了Context API（不管是旧版还是React 16.3+的新版）的父组件中，setState触发了父组件的重新渲染，进而导致Context的value发生了变化；
• 项目中依赖的第三方库（比如路由、状态管理工具）内部使用了Context，组件更新时这些库的上下文状态发生了变动。

解决方案 #

1. 排查上下文依赖：顺着组件树往上梳理，看看有没有父组件使用了Context，并且它的value在组件更新时发生了不必要的变化。
2. 迁移到新的生命周期方法：componentWillReceiveProps已经被标记为过时（React 17起会逐步移除），推荐用React 16.3引入的static getDerivedStateFromProps替代。这个方法是纯函数，会在props或context变化时触发，更符合React的设计理念：

static getDerivedStateFromProps(nextProps, prevState) {
  console.log('getDerivedStateFromProps triggered');
  // 在这里处理props/context变化的逻辑，不需要更新state就返回null
  return null;
}

3. 优化上下文更新逻辑：如果是父组件的Context频繁更新导致的问题，可以给父组件添加shouldComponentUpdate（类组件）或用React.memo（函数组件）做渲染优化，确保只有当Context的value真正变化时才触发更新。

额外小提示 #

你的组件初始state里没有clickCount，第一次点击按钮时this.state.clickCount是undefined，计算后会得到NaN，建议初始化时补上：

state = { clickCount: 0 };

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