setState 的顺序

Question

例如，一个组件的初始状态为 {loading: true, setup: true}，当像这样改变状态时：

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

有没有可能在某一时刻 loading 是 false 而 setup 在真实 DOM 上仍然是 true ?因为据我所知（如有错误请指正），通过VDOM更新的过程如下：

将所有更改添加到 diff queue
以 60FPS（通过 requestAnimationFrame），批处理 diff queue 中的所有更改。然后按顺序将所有突变应用于 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)?

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

如果你想保持一个状态为 true 而另一个状态为 false，那么你可以使用像这样的回调：

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

Answer 2

is there a time where loading is false and setup is true ?

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

这样不行。

首先： VDOM 将在一次 fn 调用中同时更新这两个更改。

其次： DOM不会随着"partially ready"的更新而更新。当某些（并行）进程未就绪时，差异化（自 Fiber 以来）可能会延迟 DOM 更新的片段。

setState 的顺序

Order of setState

javascript

reactjs

virtual-dom