javascript - setState的顺序

Question

例如，组件的初始状态为{loading: true, setup: true}，当更改状态时，如下所示:

---

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

---

是否有可能在某一时刻 loading 为 false 而 setup 仍为 true 因为据我所知(如果我错了请纠正我)，通过VDOM更新的过程如下:

• 将所有更改添加到差异队列
• 以 60FPS 的速度(通过 requestAnimationFrame)，批量处理 diff 队列 中的所有更改。然后按顺序将所有突变应用到 DOM。

由于我们按顺序将所有补丁应用到 DOM，所以我假设会有一个时间 loading: false 和 setup: true？

Answer 1

由于对象属性的顺序无法保证，因此 setState 的顺序也无法保证。此外，setStates 中的所有状态都会在对象中存在时更新一次。因此，在您的示例中，loading 和 setup 状态都会立即更新。但我们不能说它的顺序是loading先，setup最后。我们不能说一种状态为true而另一种状态为false。两种状态都会立即更新为 false，但不保证其顺序(对象中属性的顺序)。

---

Will the browser do the paint and layout twice (as we change two states)?

浏览器将在状态更新后重新绘制，即。在浏览器重新绘制之前，这两种状态都已经受到影响。渲染钩子(Hook)将被调用两次，一次用于初始状态，一次用于更新状态。

---

如果你想保持一个状态为true而另一个状态为false，那么你可以使用如下回调:

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