我在ReactJS项目中一直在使用babel的async await。我发现可以方便地与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。不漂亮。但是在代码示例中，等待状态以某种方式等待await知道该handleChange已完成…但是我认为等待仅与promise一起使用，并等待一个promise解析后再继续。handleChange中没有承诺，也没有解决方案。它如何知道要等待什么？

这似乎意味着setState是异步运行的，而await以某种方式知道它何时完成。也许setState在内部使用诺言？

版本：

反应：“ ^ 15.4.2”

babel-core：“ ^ 6.26.0”

babel-preset-env：“ ^ 1.6.0”，

babel-preset-react：“ ^ 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”