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
https://stackoverflow.com/questions/47019199/why-does-async-await-work-with-react-setstate
1:首先调用 changeAndValidate
, 先执行 await this.handleChange(e)
右边的方法,log
需要等待await
执行完毕才执行
2:调用 handleChange
方法,先setState
,setState
是一个异步操作,不会立即执行。然后log
,首先输出synchronous code
3:handleChange
方法默认返回undefined
。方法结束
4: await this.handleChange(e)
,undefined
不是一个Promise
,所有要转化成Promise.resolve(undefined)
,Promise
异步执行,加入到event loop
中,在setState
之后.
5:setState
执行完毕,执行componentDidUpdate
,输出updated component
6:event loop
执行到Promise
,await
完成,输出asynchronous validation code
网友评论