Порядок setState

Question

Например, компонент имеет начальное состояние {loading: true, setup: true} и при изменении состояний, например:

---

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

---

Есть ли какие-то шансы в какой-то момент, что loading равно false, а setup по-прежнему true на реальном DOM? Поскольку, насколько я знаю (поправьте меня, если я ошибаюсь), процесс обновления через VDOM следующий:

• Добавьте все изменения в diff queue
• При 60FPS (через requestAnimationFrame), пакетируйте все изменения в diff queue.Затем примените все мутации к DOM по порядку.

Поскольку мы применяем все патчи к DOM по порядку, поэтому я предполагаю, что будет время, когда loading: false и setup: true?

Answer 1

есть ли время, когда loading равно false, а setup равно true?

Нет, я почти уверен, нет никаких шансов, что setState может быть разделен на отдельные обновления , которые могут быть отдельно переданы в DOM.

Это не работает таким образом.

Первое: VDOM будет обновляться сразу с обоими изменениями в одном вызове fn.

Секунда: DOM не будет обновляться "частично готовыми" обновлениями.Когда некоторые (параллельные) процессы не готовы, диффузия (так как Fiber) может задержать фрагменты обновлений 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