美文网首页RN 项目使用组件
(转)ReactNative - setState 和 asyn

(转)ReactNative - setState 和 asyn

作者: 精神病患者link常 | 来源:发表于2019-10-21 14:14 被阅读0次
    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

    相关文章

      网友评论

        本文标题:(转)ReactNative - setState 和 asyn

        本文链接:https://www.haomeiwen.com/subject/sudtvctx.html