react中的this.setState是同步还是异步?

152 阅读1分钟

之前刚接触react的时候就遇到过这个问题,在调用了this.setState({state:newState})这行代码之后,下一行打印state时,state仍然是旧的state。这说明this.setState是异步的(排除更新不成功的情况下),处理方法一般是通过state的第二个参数回调函数来拿到更新后的值,即

this.setState({state:newState},()=>{console.log(state)}) //state的值为newState

但是,经过后来研究发现,setState并不一定是异步更新,它根据代码环境来进行区分的: React封装之外的事件中调用setState是同步更新的。比如原生js绑定的事件,addEventlistener,setTimeout,setInterval等
React封装之内的事件中调用setState是异步更新的。比如onChange,onClick等等
这是由setState的内部实现逻辑决定的。封装为异步的原因也是为了react的性能考虑,异步只需要调用一次render函数更新视图即可,同步的话就需要调用多次render了。