Ожидается ли работа aync с методом React setState?

Question

Может кто-нибудь помочь прояснить использование async / await в методе React setState?Я думал, что это работает только с обещаниями.Я не мог найти подходящий документ для этого.Пожалуйста, кто-нибудь, помогите!

У меня есть что-то подобное в моем приложении, и оно работает:

aync setNewName {
  this.setState({ name: "boo" });
  console.log(this.state); //prints most recent state - {name: 'boo'}
};

Почему это работает?Сработало ли это, потому что в этом случае состояние обновлялось быстрее перед выполнением оператора консоли?Гарантирует ли это синхронное выполнение в других случаях?

Answer 1

Это:

поясняет использование async / await в методе React setState

В предоставленном коде async просто переводит вызов в setState().

Это:

Я думал, что это работает только с Обещаниями.

Предполагая, что "это" означает async/await, тогда это правда.Чего вы не понимаете, так это того, что функция setState() заключена внутри Обещания, а не , которая ведет себя как обещание.

Это:

У меня естьчто-то вроде этого в моем приложении, и оно работает:

Этот код будет всегда работать.Зачем?потому что он просто выполняется синхронно.Обещанный объект создается из вызова функции, потому что он объявлен как async.

This:

Работало ли это, потому что в этом случае состояние обновлялось быстрее перед выполнением консолиоператор?

[EDIT] Нет, это не имеет ничего общего с при обновлении состояния . Скорее всего, да.Этот код не "ждет, пока setState() завершит свою работу, но в этом случае он завершается немедленно.

Способ, которым это работает:

1. Создание обещания
2. Выполнить setState()
   • , который немедленно возвращается , поскольку у него нет оператора return
   • Реакция продолжается с процессом обновления состояния асинхронно - завершится в дальнейшем
3. Выполните console.log ()
4. Немедленно разрешите Обещание (поскольку асинхронных операций нет

This:

Гарантирует ли это синхронное выполнение в других случаях?

Нет.

Answer 2

Java-скрипт выполнит весь синхронный код до того, как начнется выполнение асинхронного кода. Первый консольный журнал синхронизирован, поэтому он выполняется. Затем setState выполняется. Поскольку setState является асинхронным, вы можете просто рассматривать его как обещание, которое разрешается, когда состояние фактически устанавливается. обратный вызов await будет выполнен после установки состояния. Вы можете относиться к этому, как обещание было выполнено.