为何父组件Props未更新时getDerivedStateFromProps仍被调用？

嘿，我完全理解你的困惑！一开始接触React新生命周期的时候，很多人都会误以为getDerivedStateFromProps只在父组件传递的props发生变化时才会调用，但实际上React的设计让这个方法的触发场景比我们直觉里的要广得多。

哪些情况会触发getDerivedStateFromProps？ #

• 组件首次挂载时（对应你看到的第一次调用）
• 父组件重新渲染时——不管props有没有变化（哪怕父组件是因为自身state更新重渲染，子组件的这个方法也会触发）
• 组件自身调用setState更新内部状态时
• 组件调用forceUpdate强制重渲染时

回到你的Demo场景：每10秒添加网格的操作，应该是通过组件自身的setState来更新状态的对吧？当你执行setState触发组件重渲染时，哪怕props没有任何变化，getDerivedStateFromProps也会被调用——这就是你看到第四次调用的原因。

对应你的调用顺序 #

你提到的控制台里第四次getDerivedStateFromProps调用，正是在组件执行setState（添加网格）触发重渲染时触发的。React把这个方法设计成了所有渲染流程的统一入口，不管渲染的触发原因是props变化、state变化还是强制更新，都会先走这个方法，方便你在这里根据当前的props和state来派生新的状态。

最佳实践：精准控制派生状态 #

如果你的业务逻辑只需要在props真正变化时才更新派生状态，那可以在getDerivedStateFromProps里做一个新旧props的对比，只有当目标props确实变化时才返回新的state，否则返回null就不会触发状态更新：

static getDerivedStateFromProps(nextProps, prevState) {
  // 对比需要关注的props是否变化
  if (nextProps.targetProp !== prevState.lastTrackedProp) {
    return {
      derivedState: nextProps.targetProp,
      lastTrackedProp: nextProps.targetProp // 存下当前props值用于下次对比
    };
  }
  // 无变化则返回null，不更新状态
  return null;
}

这样就能避免不必要的状态更新，让你的组件逻辑更清晰可控。

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