摘要：根本原因在于，并不是真正意義上的異步操作，它只是模擬了異步的行為。而合成事件和生命周期函數(shù)中，是受控制的，其會將設置為，從而走的是類似異步的那一套。總結此處總結是直接引用了只在合成事件和鉤子函數(shù)中是異步的，在原生事件和中都是同步的。

在 React 日常的使用中，一個很重要的點就是，不要直接去修改 state。例如：this.state.count = 1是無法觸發(fā) React 去更新視圖的。因為React的機制規(guī)定，一個state的更新，首先需要調(diào)用 setState 方法。

this.setState({
    count: 1
})

這樣便能觸發(fā)重新渲染。稍有經(jīng)驗的開發(fā)者會知道，setState 方法其實是 “異步” 的。即立馬執(zhí)行之后，是無法直接獲取到最新的 state 的，需要經(jīng)過 React 對 state 的所有改變進行合并處理之后，才會去計算新的虛擬dom，再根據(jù)最新的虛擬dom去重新渲染真實dom。

class App extends Component {
    state = {
        count: 0
    }

    componentDidMount(){
        this.setState({count: this.state.count + 1})
        console.log(this.state.count) // 0
    }

    render(){
        ...
    }
}

demo請點擊

那怎么才能獲取到修改后的state呢？React為我們提供了一個回調(diào)去實現(xiàn)。

...
this.setState({count: this.state.count + 1}, ()=>{
    console.log(this.state.count) // 1
})
...

回調(diào)里的 state 便是最新的了，原因是該回調(diào)的執(zhí)行時機在于state合并處理之后。如果我們這樣去做：

...
    this.setState({count: this.state.count + 1})
    this.setState({count: this.state.count + 1})
...

實際最終的 count 會等于 1，原因是執(zhí)行時得到的 this.state.count = 0。那怎么實現(xiàn)結果為 2 呢？

...
this.setState(prevState => {count: prevState.count + 1});
this.setState(prevState => {count: prevState.count + 1});
...

setState()實際上可以接受一個函數(shù)作為參數(shù)，函數(shù)的首個參數(shù)就是上一次的state。

以上介紹了setState的三種使用方式，下面我們來看看它們的執(zhí)行時機是怎樣的：

...
    this.setState({ count: this.state.count + 1 });
    console.log("console: " + this.state.count); // 0
    this.setState({ count: this.state.count + 1 }, () => {
      console.log("console from callback: " + this.state.count); // 2
    });
    this.setState(prevState => {
      console.log("console from func: " + prevState.count); // 1
      return {
        count: prevState.count + 1
      };
    }, ()=>{
      console.log("last console: "+ this.state.count)
    });
...

執(zhí)行結果：

console: 0 
console from func: 1 
console from callback: 2
last console: 2 

React 其實會維護著一個 state 的更新隊列，每次調(diào)用 setState 都會先把當前修改的 state 推進這個隊列，在最后，React 會對這個隊列進行合并處理，然后去執(zhí)行回調(diào)。根據(jù)最終的合并結果再去走下面的流程（更新虛擬dom，觸發(fā)渲染）。

因為setState()之后無法立馬獲取最新的 state，給人的感覺便是異步去設置狀態(tài)。也確實是有異步的感覺（實 際原理后面講訴）。那么為什么 React 要把狀態(tài)的更新設計成這種方式呢？直接 this.state.count = 1 不好嗎？

有興趣的可以點擊看看：https://github.com/facebook/react/issues/11527#issuecomment-360199710

這邊簡單總結下：

保證內(nèi)部的一致性：即使state是同步更新，props也不是。（你只有在父組件重新渲染時才能知道props）

將state的更新延緩到最后批量合并再去渲染對于應用的性能優(yōu)化是有極大好處的，如果每次的狀態(tài)改變都去重新渲染真實dom，那么它將帶來巨大的性能消耗。

我們先來看一段代碼，執(zhí)行前建議大家先預估下結果：

demo請點擊

class App extends Component {
  state = {
    count: 0
  };

  componentDidMount() {
    // 生命周期中調(diào)用
    this.setState({ count: this.state.count + 1 });
    console.log("lifecycle: " + this.state.count);
    setTimeout(() => {
      // setTimeout中調(diào)用
      this.setState({ count: this.state.count + 1 });
      console.log("setTimeout: " + this.state.count);
    }, 0);
    document.getElementById("div2").addEventListener("click", this.increment2);
  }

  increment = () => {
    // 合成事件中調(diào)用
    this.setState({ count: this.state.count + 1 });
    console.log("react event: " + this.state.count);
  };

  increment2 = () => {
    // 原生事件中調(diào)用
    this.setState({ count: this.state.count + 1 });
    console.log("dom event: " + this.state.count);
  };

  render() {
    return (
      

        
couont: {this.state.count}
        

          click me and count+1
        
        
click me and count+1
      
    );
  }
}

探討前，我們先簡單了解下react的事件機制：react為了解決跨平臺，兼容性問題，自己封裝了一套事件機制，代理了原生的事件，像在jsx中常見的onClick、onChange這些都是合成事件。

那么以上4種方式調(diào)用setState()，后面緊接著去取最新的state，按之前講的異步原理，應該是取不到的。然而，setTimeout中調(diào)用以及原生事件中調(diào)用的話，是可以立馬獲取到最新的state的。根本原因在于，setState并不是真正意義上的異步操作，它只是模擬了異步的行為。React中會去維護一個標識（isBatchingUpdates），判斷是直接更新還是先暫存state進隊列。setTimeout以及原生事件都會直接去更新state，因此可以立即得到最新state。而合成事件和React生命周期函數(shù)中，是受React控制的，其會將isBatchingUpdates設置為 true，從而走的是類似異步的那一套。

此處總結是直接引用了：https://juejin.im/post/5b45c57c51882519790c7441#heading-7

setState 只在合成事件和鉤子函數(shù)中是“異步”的，在原生事件和 setTimeout 中都是同步的。

setState的“異步”并不是說內(nèi)部由異步代碼實現(xiàn)，其實本身執(zhí)行的過程和代碼都是同步的，只是合成事件和鉤子函數(shù)的調(diào)用順序在更新之前，導致在合成事件和鉤子函數(shù)中沒法立馬拿到更新后的值，形式了所謂的“異步”，當然可以通過第二個參數(shù) setState(partialState, callback) 中的callback拿到更新后的結果。

setState 的批量更新優(yōu)化也是建立在“異步”（合成事件、鉤子函數(shù)）之上的，在原生事件和setTimeout 中不會批量更新，在“異步”中如果對同一個值進行多次 setState ， setState 的批量更新策略會對其進行覆蓋，取最后一次的執(zhí)行，如果是同時 setState 多個不同的值，在更新時會對其進行合并批量更新。

參考：

你真的理解setState嗎？

淺出深入setState（上）

淺出深入setState（下）

坦白說，自己的水平還是挺有限的，還需要努力努力再努力。只有懂了很多，才能寫出有意義的東西吧。現(xiàn)在寫的，大多都是根據(jù)別人的文章，自己理解了之后，換成自己的語言再表達一遍而已。。

慢慢來，總有一天可以突破這個界限的，真正寫出屬于自己的東西。

另外，真心感謝這些文章的作者給予的幫助。

微信號：rcgrcg，歡迎交友～

為了生計，我也接外包項目的哦～

網(wǎng)站搭建（PC、H5、前后端全包，我們有團隊的哦），APP開發(fā)（安卓和IOS），都是有成功案例的哦。

有興趣的請聯(lián)系我！！服務包您滿意的那種！！

Good luck！
2018-11-18 廈門