React v16.3组件警告：使用新API时旧生命周期未执行，求排查

嘿，我来帮你搞定这个警告问题！

这个警告的核心原因是：React在v16.3引入getDerivedStateFromProps作为**componentWillReceiveProps的安全替代方案**，并且明确规定——当组件使用了新的getDerivedStateFromProps静态方法时，旧的componentWillReceiveProps生命周期会被禁用，两者不能共存，否则就会触发这个警告。

你现在遇到这个问题，大概率是两种情况之一：

情况1：你的Test组件中实际存在componentWillReceiveProps方法 #

可能你在编写代码时不小心保留了这个旧方法，或者之前写了之后注释掉但没彻底删除（比如注释符号没写对，或者残留了代码片段）。你需要仔细检查你的Test组件代码，确保完全移除componentWillReceiveProps方法。

情况2：你的Test组件继承了包含componentWillReceiveProps的父组件 #

如果你的Test组件是继承自某个自定义父组件（比如class Test extends BaseComponent），而那个父组件里定义了componentWillReceiveProps，即使你的子组件没写这个方法，也会触发警告。

解决办法：

• 如果父组件是你自己维护的：把父组件中的componentWillReceiveProps替换成getDerivedStateFromProps，按照新API的规则重构逻辑。
• 如果父组件是第三方库：尝试升级该库到适配React v16.3+的版本，或者寻找替代方案规避旧生命周期的影响。

正确使用getDerivedStateFromProps的示例 #

这里给你一个符合规范的代码示例，注意getDerivedStateFromProps是静态方法，无法访问this，只能通过参数接收nextProps和prevState来判断是否需要更新state：

class Test extends React.Component {
  state = {
    someValue: ''
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // 仅当props中的值变化时，才更新state
    if (nextProps.someValue !== prevState.someValue) {
      return { someValue: nextProps.someValue };
    }
    // 不需要更新state时返回null
    return null;
  }

  render() {
    return null;
  }
}

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