Я использую async ждут с babel в моем проекте ReactJS. Я обнаружил удобное использование с React setState, которое я хотел бы лучше понять. Рассмотрим этот код:
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value})
console.log('synchronous code')
}
changeAndValidate = async (e) => {
await this.handleChange(e)
console.log('asynchronous validation code')
}
componentDidUpdate() {
console.log('updated component')
}
Мое намерение состояло в том, чтобы асинхронный код проверки выполнялся после обновления компонента. И это работает! Результирующий журнал консоли показывает:
synchronous code
updated component
asynchronous validation code
Код проверки будет выполняться только после того, как handleChange обновил состояние и отобразит новое состояние.
Обычно для запуска кода после обновления состояния вам придется использовать обратный вызов после this.setState. Это означает, что если вы хотите запускать что-либо после handleChange, вы должны дать ему параметр обратного вызова, который затем передается в setState. Не красиво. Но в примере кода, как-то ждут, знает, что handleChange завершен после того, как государство обновилось... Но я думал, что ждут только работы с обещаниями и ждет обещания разрешить, прежде чем продолжить. Theres нет обещания и никакого разрешения в handleChange... Как он знает, что ждать?
По-видимому, подразумевается, что setState запускается асинхронно и ждет, как-то известно о завершении. Может быть, setState использует обещания внутри?
Версии:
реагировать: "^ 15.4.2"
babel-core: "^ 6.26.0"
babel-preset-env: "^ 1.6.0",
babel-preset-реагировать: "^ 6.24.1",
babel-preset-stage-0: "^ 6.24.1"
babel-plugin-system-import-transformer: "^ 3.1.0",
babel-plugin-transform-decorators-legacy: "^ 1.3.4",
babel-plugin-transform-runtime: "^ 6.23.0"