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

轉載于:https://www.cnblogs.com/naniandongzhi/p/9813088.html

總結

以上是生活随笔為你收集整理的setState是异步还是同步？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。