javascript - 为什么即使 Parent Props 没有更新，getDerivedStateFromProps 也会被再次调用？

Question

我正在关注 this guide关于 React 中的生命周期方法 & 我在该指南中调整了一个演示，有点像 https://codesandbox.io/s/m7m4qz6pqp

这是一个简单的应用程序，它使用所有 React 的新生命周期方法并每 10 秒将网格添加到底部(所以等待 10 秒然后查看控制台)。

我对 getDerivedStateFromProps 的理解是，当父 props 发生变化时，它们会被调用，但在这个沙箱中，如果您检查控制台，即使 props 没有变化，它也会被调用。

我添加了一些有用的 console.log 来跟踪订单。

现在，它在控制台

中显示了这一点

getDerivedStateFromProps - 1, 4 
render - 2, 6 
render - 2
componentDidMount - 3 
getDerivedStateFromProps - 1, 4 

这意味着

getDerivedStateFromProps 由于 1, 4 被第一次调用render 由于 2, 6 而被第二次调用Error 组件的 render 在我们可以忽略的之后被调用componentDidMount 由于 3 而被调用到第 3 次getDerivedStateFromProps 由于 1, 4

被调用到第 4 次

现在我明白了所有其他命令。我只是不明白为什么第 4 次调用 getDerivedStateFromProps 1, 4。

谁能解释为什么会发生这种情况，因为我在第一次后没有看到任何 Prop 变化？

Answer 1

首先在 React 16.3 版本中，getDerivedStateFromProps() 只是在更新 props(http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) 时被调用。但是现在在 React 16.4 版本中，在更新 props 和更新状态时调用 getDerivedStateFromProps()(不管重新渲染的原因)。所以在你的情况下，

getDerivedStateFromProps() 在该条件下在 render() 方法之前被调用；

1. 初始挂载
2. 每个状态和 Prop 更新

您的组件将在每 10 秒更新一次 block 时呈现，因此 getDerivedStateFromProps() 将每 10 秒调用一次。