技術標籤：reactsetStatereact

React 中的setState是非同步的嗎?

觀點:React中的setState可以是非同步的,也可以是同步的。

1.什麼時候是非同步的

1.react中整合的事件呼叫setState，例如jsx中的onClick，或者是生命週期函式，這些內容呼叫setState是非同步的。

   render() {
        return (
            <div>
                <div>{this.state.counter}</div>
                <
 
button onClick={()=>{this.increment()}}>增加</button>
            </div>
        )
    }
    //this.state.counter 為 0 
    increment(){
        this.setState({
            counter: this.state.counter+1
        })
        console.log(this.state.counter) // 0 ，不會加上1
    }

2.什麼時候是同步的:

不是react中整合的函式裡面呼叫，例如: setTimeOut,setInterval,以及使用addEventListener的時候就是同步的:

    constructor(){
        super();
        this.state = {
            counter: 1,
        }
    }
    componentDidMount(){
        setTimeout(()=>{
            this.setState({counter:10});
            console.log(this.state.counter); //10
        },2000)
    }
    render() {
        return (
            <
 
div>
                <div>{this.state.counter}</div>
                <button onClick={()=>{this.increment()}}>增加</button>
            </div>
        )
    }

上面的程式碼可以獲取到 10

原因:

使用setState時，React中會去維護一個標識（isBatchingUpdates），判斷是直接更新還是先暫存state進佇列。setTimeout以及原生事件都會直接去更新state，因此可以立即得到最新state。而合成事件和React生命週期函式中，是受React控制的，其會將isBatchingUpdates設定為 true，從而走的是類似非同步的那一套。

為什麼setState設計成偽非同步

• setState設計為偽非同步,可以顯著提升效能

  如果每次用setState都進行更新一次，多次呼叫，render的執行頻率非常高，重新渲染的頻率高，效率低
  最好的辦法是獲取多個更新轉態進行合併，並做一次批處理更新，可以大大提高更新的效能
  如果更新了state但是沒有去執行render函式,那麼state和props不能保持同步，state和props不保持同步會導致一些開發問題。

參考連結