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

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

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ā)時(shí) isBatchingUpdates 為 true，所以并不會(huì)直接執(zhí)行更新 state，而是加入了 dirtyComponents，所以打印時(shí)獲取的都是更新前的狀態(tài) 0。

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

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

一、setState 異步更新：

setState通過一個(gè)隊(duì)列機(jī)制來實(shí)現(xiàn) state 更新，當(dāng)執(zhí)行 setState() 時(shí)，會(huì)將當(dāng)前執(zhí)行棧中所有需要更新的 state 淺合并后放入狀態(tài)隊(duì)列中，而不會(huì)立即更新 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ì)上等同與將當(dāng)前執(zhí)行棧中多個(gè) setState 與 state 進(jìn)行了淺合并：

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

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

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

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

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

三、總結(jié)：

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

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