setState是异步还是同步？

Posted 2021-01-13 naniandongzhi

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;

• setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
• setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
• setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

链接：https://juejin.im/post/5b45c57c51882519790c7441