setState何时同步，何时异步，为什么？

Posted 2020-11-22 gooldns

setState何时同步，何时异步，为什么

答案：在React库控制时，异步；否则同步。

示例代码如下：

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

上文TouchableOpacity中，是React库控制，此时使用setState则为异步，alert值为"异步"。

如何才能触发同步呢？看如下代码：

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

　　此时使用回调的方式，即可触发同步，大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。

 

React是怎样控制异步和同步的呢？

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新，而 isBatchingUpdates 默认是 false，表示 setState 会同步更新 this.state；但是，有一个函数 batchedUpdates，该函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true，这样由 React 控制的事件处理过程 setState 不会同步更新 this.state。