setState异步同步问题

转载自 https://www.jianshu.com/p/3a4dcd2b5b80

 

关于setState异步同步的问题，以官方文件中较精确的说法：'它不是保证同步的"。
那么什么时候异步，什么时候同步？
答案是在React库控制时，异步；否则同步。
如：setState方法写在

constructor(props){
    super(porps);
    this.state = {
        name:"alpha"
    }
}
test(){
    this.setState({
        name:"beta"
    })
    alert(this.state.name)
}
<TouchableOpacity onPress={()=>this.text()}>
    <Text>Button</Text>
</TouchableOpacity> 

上文TouchableOpacity中，是React库控制，则为异步，alert值为"alpha"。
那么，如何alert出"beta"呢？

方法1

使用callback回调函数：

test(){
    this.setState({
        name:"beta"
    },function(){
        alert(this.state.name)
    })
}

方法2

async/await实现异步转同步

constructor(props){
    super(porps);
    this.state = {
        name:"alpha"
    }
}
setStateAsync(state){
    return new Promise((resolve,reject)=>{
        this.setState(state)
    })
}
async componentDidMount(){
    await this.setStateAsync({name:"beta"})
    console.log(this.state.name)
}