setState阶

Question

例如，组件的初始状态为{loading: true, setup: true}，并且在更改以下状态时：

this.setState({
  loading: false,
  setup: false
})

在真正的DOM上，loading 是 false ， setup 仍然是 true ，是否有可能这样做？E 223，因为据我所知(如果我错了，请纠正我的错误)，通过VDOM进行更新的过程如下：

• 将所有更改添加到diff queue中
• 在60 are (通过requestAnimationFrame)时，批处理diff queue中的所有更改。然后按照顺序将所有的突变应用于DOM。

因为我们按照顺序将所有补丁应用于DOM，所以我假设会有一段时间loading: false和setup: true

Answer 1

在什么时候，loading是false，setup是true？

不，我很确定setState 没有机会被分割成单独的更新，这些更新可以单独传递给DOM。

不是这样的。

优先:在一个fn调用中，将同时使用两个更改更新 VDOM。

第二： DOM不会用“部分就绪”的更新来更新。当一些(并行)进程尚未准备就绪时，扩展(因为光纤)可以延迟DOM更新的片段。

Answer 2

由于对象属性的顺序没有得到保证，所以setState的顺序也没有得到保证。此外，setStates中的所有状态都会更新一次，因为它们存在于对象中。因此，在您的示例中，loading和setup都会同时更新。但是，我们不能说它的顺序是loading将优先，setup将持续。我们不能说一个州是true，另一个州是false。这两种状态都被一次更新为false，除非它的顺序没有得到保证(对象中属性的顺序)。

浏览器会进行两次画图和布局(当我们改变两种状态时)吗？

浏览器将在状态更新后重新绘制。在浏览器重新绘制之前，这两个状态都已经受到影响。呈现钩子将被调用两次，一次用于初始状态，一次用于更新状态。

如果您想将一个状态保持为true，另一个状态保持为false，则可以使用回调如下：

this.setState({
  loading: false
}, () => {
  setTimeout(() => {
    this.setState({
      setup: false
    })
}, 5000) // setup to false after 5 seconds