原文：https://github.com/sisterAn/blog/issues/26

React 通過狀態(tài)管理來實現(xiàn)對組件的管理，當使用 this.setState() 時，React會調(diào)用 render 方法來重新渲染 UI。
先看一個例子：

import React from 'react';

class Example extends React.Component {
    constructor() {
      super();
      this.state = {
        val: 0
      };
    }
    
    componentDidMount() {
      this.setState({val: this.state.val + 1});
      console.log(1,this.state.val);    // 第 1 次 log
  
      this.setState({val: this.state.val + 1});
      console.log(2,this.state.val);    // 第 2 次 log
  
      setTimeout(() => {
        this.setState({val: this.state.val + 1});
        console.log(3,this.state.val);  // 第 3 次 log

        this.setState({val: this.state.val + 1});
        console.log(4,this.state.val);  // 第 4 次 log
      }, 0);
    }
  
    render() {
      return <div>React Hello --- {this.state.val}</div>;
    }
};
export default Example

答案是： 0 0 2 3。
原因是：
1、第一次和第二次都是在 react 自身生命周期內(nèi)，觸發(fā)時 isBatchingUpdates 為 true，所以并不會直接執(zhí)行更新 state，而是加入了 dirtyComponents，所以打印時獲取的都是更新前的狀態(tài) 0。

2、兩次 setState 時，獲取到 this.state.val 都是 0，所以執(zhí)行時都是將 0 設(shè)置成 1，在 react 內(nèi)部會被合并掉，只執(zhí)行一次。設(shè)置完成后 state.val 值為 1。

3、setTimeout 中的代碼，觸發(fā)時 isBatchingUpdates 為 false，this.setState 同步執(zhí)行代碼，所以能夠直接進行更新，所以連著輸出 2，3。

一、setState 異步更新：

setState通過一個隊列機制來實現(xiàn) state 更新，當執(zhí)行 setState() 時，會將當前執(zhí)行棧中所有需要更新的 state 淺合并后放入狀態(tài)隊列中，而不會立即更新 state。

// 假設(shè) state.count === 0
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
// state.count === 1, 而不是 3

本質(zhì)上等同與將當前執(zhí)行棧中多個 setState 與 state 進行了淺合并：

// 假設(shè) state.count === 0
Object.assign(state,
              {count: state.count + 1},
              {count: state.count + 1},
              {count: state.count + 1} )
// {count: 1}

如何解決這個問題，即使用 setState() 的第二種形式：以 function(state, props) => newState 函數(shù)作為參數(shù)，而不是一個對象，此函數(shù)第一參數(shù)為前一刻的 state， 第二參數(shù)為 接收的 props 屬性。

// 使用方法：
this.setState((prevState, props) => {
  count: prevState.count + 1
})

二、setState 循環(huán)調(diào)用的風(fēng)險：

當調(diào)用 setState 時，實際上會執(zhí)行 enqueueSetState 方法，最終通過 enqueueUpdate 執(zhí)行 state 的更新。但如果在 shouldComponentUpdate 或者 componentWillUpdate 方法里調(diào)用 this.setState 會導(dǎo)致調(diào)用 updateComponent 方法進行組件更新，而 updateComponent 方法又會調(diào)用 shouldComponentUpdate 和 componenitWillUpdate 方法，因此造成循環(huán)調(diào)用，使得瀏覽器沾滿后崩潰。

三、總結(jié)：

在React中，如果是由React引發(fā)的事件處理（比如通過onClick引發(fā)的事件處理）、生命周期函數(shù)中，調(diào)用setState不會同步更新this.state，除此之外如 addEventListener 、setTimeout、setInterval 會同步執(zhí)行。

原因：在React的setState函數(shù)實現(xiàn)中，會根據(jù)一個變量isBatchingUpdates判斷是直接更新this.state還是放到隊列中等待更新，而isBatchingUpdates默認是false，即默認是同步執(zhí)行。但是，有一個函數(shù)batchedUpdates，這個函數(shù)會把isBatchingUpdates修改為true，而當React在調(diào)用事件處理函數(shù)之前就會調(diào)用這個batchedUpdates，造成的后果，就是由React控制的事件處理setState不會同步更新this.state。