setState … Запутался? Синхронный или асинхронный?

В ОДНОЙ СТРОКЕ setState является АСИНХРОННЫМ.

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

Давайте поговорим о синхронном и асинхронном. Асинхронный — это то, что не блокирует выполнение остального кода JavaScript, в то время как синхронный блокирует выполнение.

Возьмем самый простой пример, Калькулятор: -

Предположим, что setState является синхронным и есть две кнопки ввода, которые нужно выполнить для выполнения математических операций. Предположим, setState является синхронным, после сложения двух значений он не позволит нам перейти к вычитанию или другим операциям, пока не будет выполнен предыдущий результат.

Итак, по этой причине setState является асинхронным, после добавления мы можем выполнять несколько операций, которые захотим.

this.setState({ foo: ‘Привет’});

Причины его асинхронного характера: -

  1. setState не изменяет this.state немедленно, он создает отложенный переход состояния. И множественные вызовы манипулирования состоянием могут привести к потере производительности.
  2. Он не является синхронным, поскольку JavaScript является однопоточным языком, и поскольку setState обновляет состояние и повторно отображает DOM, несколько вызовов состояния могут привести к тому, что браузер перестанет отвечать.

3. Если бы он был синхронным, после запуска действия и после того, как редьюсер обновил состояние, он повторно отрисовывает компонент.

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

4. Короче говоря, асинхронный характер setState увеличивает производительность нашего приложения.

Надеюсь, это поможет вам понять причину асинхронного характера setState.