React setState同步異步以及處理方式

結論：setState實際上是使用了隊列的方式，如果不對其進行處理，那就會呈現出異步的現象。

隊列介紹：隊列屬於常用的數據結構中的一種。

　　特點：只允許在表的一端進行插入，表的另一端進行刪除。所以只有最早進去的數據才會被最早刪除，如果沒有數據那就是個空隊列。故隊列又稱為先進先出（FIFO—first in first out）線性表。

React會把多個setState()調用合並成一個調用。這句話的意思是程序碰到一個setState()就會把這個方法放入隊列中，如果一下子出現了多個setState操作，會一起放入隊列中，以最后一個為主。

在正常的方法或者生命周期函數中，setState表現為異步，如果是在延遲setTimeOut這類函數中，就會表現為同步。

改為同步的方法：

• 　　直接傳入一個函數

  this.setState((state, props) => ({data: 111}))

   

• 加入第二個參數，第二個參數是個回調函數，可以在這個回調函數中獲取到剛剛更新得到的值，不過這個值實在 render 方法執行完畢之后才進行回調的

  this.setState({data: 111}, function(){ console.log(this.state.data) })

   

• 使用 promise + asyce 進行封裝

  async function asyceSetState(state) {
    new Promise((resolve, reject) => {
      this.setState(state, () => { resolve() })
    })
  }
  
  await asyceSetState({data: 111})