state = { count: 0 };
handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
};
render() {
    console.log(`render`);
    return (
        <>
            <div>當前計數：{this.state.count}</div>
            <button onClick={this.handleClick}>add</button>
        </>
    );
}

按照常理來說，第一次點擊按鈕時，由于執(zhí)行了兩次兩次setState，每次都將count的值進行加1，render()應該會執(zhí)行兩次，最后count的值應該是2。但是 React 并不是這么執(zhí)行的。

以上代碼放到瀏覽器運行一下即可：

最開始時，頁面顯示count的值為0，控制臺打印出render，這是 React 首次渲染時打印的。當點擊完按鈕后，頁面顯示count值是1，同時也只打印了1個render，說明在這過程中 React 只執(zhí)行了一次setState，只執(zhí)行了一次render()渲染操作。

原因在于，React 內部將同一事件響應函數中的多個setState進行合并，減少setState的調用次數，也就能減少渲染的次數，提高性能。

這也就解釋了上述代碼，為什么最后count的值是1，因為 React 將兩個setState進行了合并，最終只執(zhí)行了1次，render()也只執(zhí)行了一次。

2. 兩個setState，調用的是哪一個？

但上述代碼沒有驗證，React 合并后，到底執(zhí)行的是哪一次setState。如下代碼所示，將第二個setState中，對count的操作改為加2，其余代碼保持不變：

state = { count: 0 };
handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 2 }); // 改為+2
};
render() {
    console.log(`render`);
    return (
        <>
            <div>當前計數：{this.state.count}</div>
            <button onClick={this.handleClick}>add</button>
        </>
    );
}

再次放到瀏覽器中執(zhí)行：

結果顯示，點擊按鈕后，count的值最終變成了2，也就是進行了+2的操作，render()也只執(zhí)行了1次。這就說明 React 在合并多個setState時，若出現(xiàn)同名屬性，會將后面的同名屬性覆蓋掉前面的同名屬性?？梢赃@么理解，對于同名屬性，最終執(zhí)行的的是最后的setState中的屬性。

3. 兩個setState放在setTimeout中？

若在點擊事件函數中，添加一個定時器setTimeout，在定時器中執(zhí)行兩次setState操作，結果又將如何？如下代碼，事件處理函數中，寫了一個定時器setTimeout，將兩次setState放入setTimeout中。

state = { count: 0 };
handleClick = () => {
    setTimeout(() => {
        this.setState({ count: this.state.count + 1 });
        this.setState({ count: this.state.count + 2 });
    }, 0);
};
render() {
    console.log(`render`);
    return (
        <>
            <div>當前計數：{this.state.count}</div>
            <button onClick={this.handleClick}>add</button>
        </>
    );
}

運行結果：

結果顯示，點擊按鈕后，count的值最終變成了3，也就+1和+2的操作都執(zhí)行了，render()也執(zhí)行了2次。

這是因為在 React 的合成事件和生命周期函數中直接調用setState，會交由 React 的性能優(yōu)化機制管理，合并多個setState。而在原生事件、setTimeout中調用setState，是不受 React 管理的，故并不會合并多個setState，寫了幾次setState，就會調用幾次setState。