setState是异步还是同步？

react中setState是同步还是异步困扰了好久，今天终于有了答案；它既是同步的，也是异步的；

同步：

加入我在页面上写三个setState去分别

componentDidMount() {

this.setState({ val: this.state.val + 1 }) console.log(1)

this.setState({ val: this.state.val + 1 }) console.log(2)

this.setState({ val: this.state.val + 1 }) console.log(3)

}

在render中打印出的值是：3；这就说明setstate是同步的；

加入我想输入val值在执行其他+，可以使用setTimeout或者使用setstate的第二个参数callback；

在 setState 的时候react内部会创建一个 updateQueue ，通过 firstUpdate 、 lastUpdate 、 lastUpdate.next 去维护一个更新的队列，在最终的 performWork 中，相同的key会被覆盖


 

state = { val: 0 }

componentDidMount() {

setTimeout(_ => { this.setState({ val: this.state.val + 1 })

    console.log(this.state.val) // 输出更新后的值 --> 1 }, 0)

}

componentDidMount() { this.setState({ val: this.state.val + 1 }) console.log(this.state.val) // 输出的还是更新前的值 --> 0 }

其实还是和合成事件一样，当 componentDidmount 执行的时候，react内部并没有更新，执行完 componentDidmount 后才去 commitUpdateQueue 更新。这就导致你在 componentDidmount 中 setState 完去console.log拿的结果还是更新前的值。

所以要在componentwillmount中更新state;