學過React，setState的寶寶們，都知道為了提高效能React將setState設定為批次更新，即非同步操作函式，不能以順序控制流的方式設定某些事件，不能依賴於this.state計算未來狀態，比如，我們希望拿到服務端來的資料後，再進行其他操作，在大型應用中，如果事件的觸發速度快於setState的更新速度，那麼計算的值完全就是錯的，那麼怎麼解決這個問題呢？

　　完成回撥

　　在setState函式的第二個引數允許傳入回撥函式，在狀態更新完畢後進行呼叫

　　this.setState({

      load: !this.state.load,
 

      count: this.state.count + 1

    }, () => {

      console.log(this.state.count);

      console.log('載入完成')

    });
　　Promise來封裝setState
　　

　　setStateAsync(state) {

    return new Promise((resolve) => {
 

      this.setState(state, resolve)

    });

   }
　　setStateAsync 返回的是Promise物件，所以在呼叫時可以用es的Async/Await語法來優化
　　

　　async componentDidMount() {

    StatusBar.setNetworkActivityIndicatorVisible(true)

    const res = await fetch('https://api.ipify.org?format=json')
 

    const {ip} = await res.json()

    await this.setStateAsync({ipAddress: ip})

    StatusBar.setNetworkActivityIndicatorVisible(false)

  }

　　這裡我們就可以保證在setState渲染完畢之後呼叫外部狀態列將網路請求狀態修改為已結束，整個元件的完整定義為：

class Exampleextends Component {

  state = {}

  setStateAsync(state) {

    ...

  }

  async componentDidMount() {

   ...

  }

　　傳入狀態計算函式

　　除了使用回撥函式的方式監聽狀態更新結果之外，React還允許我們傳入某個狀態計算函式而不是物件來作為第一個引數。狀態計算函式能夠為我們提供可信賴的元件的State與Props值，即會自動地將我們的狀態更新操作新增到佇列中並等待前面的更新完畢後傳入最新的狀態值：

　　this.setState(function(prevState, props){

      return {showForm: !prevState.showForm}

   });

　　incrementCount(){

   　　this.setState((prevState, props) => ({

     　　 count: prevState.count + 1

   　　 }));

  　　 this.setState((prevState, props) => ({

    　　  count: prevState.count + 1

   　　 }));

 　　 }

　　這裡的第二個setState傳入的prevState值就是第一個setState執行完畢之後的計數值，也順利保證了連續自增兩次

至此已經結束，希望對於各位可以有幫助