1. 兩個(gè)setState，調(diào)用幾次？

如下代碼所示，state中有一個(gè)count。對(duì)按鈕綁定了點(diǎn)擊事件，事件中執(zhí)行了兩次setState，每次都將count的值加1。

當(dāng)點(diǎn)擊按鈕時(shí)，setState會(huì)執(zhí)行幾次？render()會(huì)執(zhí)行幾次？

答案：都是1次。

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

按照常理來(lái)說(shuō)，第一次點(diǎn)擊按鈕時(shí)，由于執(zhí)行了兩次兩次setState，每次都將count的值進(jìn)行加1，render()應(yīng)該會(huì)執(zhí)行兩次，最后count的值應(yīng)該是2。但是 React 并不是這么執(zhí)行的。

以上代碼放到瀏覽器運(yùn)行一下即可：

最開(kāi)始時(shí)，頁(yè)面顯示count的值為0，控制臺(tái)打印出render，這是 React 首次渲染時(shí)打印的。當(dāng)點(diǎn)擊完按鈕后，頁(yè)面顯示count值是1，同時(shí)也只打印了1個(gè)render，說(shuō)明在這過(guò)程中 React 只執(zhí)行了一次setState，只執(zhí)行了一次render()渲染操作。

原因在于，React 內(nèi)部將同一事件響應(yīng)函數(shù)中的多個(gè)setState進(jìn)行合并，減少setState的調(diào)用次數(shù)，也就能減少渲染的次數(shù)，提高性能。

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

2. 兩個(gè)setState，調(diào)用的是哪一個(gè)？

但上述代碼沒(méi)有驗(yàn)證，React 合并后，到底執(zhí)行的是哪一次setState。如下代碼所示，將第二個(gè)setState中，對(duì)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>當(dāng)前計(jì)數(shù)：{this.state.count}</div>
            <button onClick={this.handleClick}>add</button>
        </>
    );
}

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

結(jié)果顯示，點(diǎn)擊按鈕后，count的值最終變成了2，也就是進(jìn)行了+2的操作，render()也只執(zhí)行了1次。這就說(shuō)明 React 在合并多個(gè)setState時(shí)，若出現(xiàn)同名屬性，會(huì)將后面的同名屬性覆蓋掉前面的同名屬性。可以這么理解，對(duì)于同名屬性，最終執(zhí)行的的是最后的setState中的屬性。

3. 兩個(gè)setState放在setTimeout中？

若在點(diǎn)擊事件函數(shù)中，添加一個(gè)定時(shí)器setTimeout，在定時(shí)器中執(zhí)行兩次setState操作，結(jié)果又將如何？如下代碼，事件處理函數(shù)中，寫(xiě)了一個(gè)定時(shí)器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>當(dāng)前計(jì)數(shù)：{this.state.count}</div>
            <button onClick={this.handleClick}>add</button>
        </>
    );
}

運(yùn)行結(jié)果：

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

這是因?yàn)樵?React 的合成事件和生命周期函數(shù)中直接調(diào)用setState，會(huì)交由 React 的性能優(yōu)化機(jī)制管理，合并多個(gè)setState。而在原生事件、setTimeout中調(diào)用setState，是不受 React 管理的，故并不會(huì)合并多個(gè)setState，寫(xiě)了幾次setState，就會(huì)調(diào)用幾次setState。

4. 總結(jié)

在 React 中直接使用的事件，如onChange、onClick等，都是由 React 封裝后的事件，是合成事件，由 React 管理。

React 對(duì)于合成事件和生命周期函數(shù)，有一套性能優(yōu)化機(jī)制，會(huì)合并多個(gè)setState，若出現(xiàn)同名屬性，會(huì)將后面的同名屬性覆蓋掉前面的同名屬性。

若越過(guò) React 的性能優(yōu)化機(jī)制，在原生事件、setTimeout中使用setState，就不歸 React 管理了，寫(xiě)了幾次setState，就會(huì)調(diào)用幾次setState。

到此這篇關(guān)于淺談React多個(gè)setState會(huì)調(diào)用幾次的文章就介紹到這了,更多相關(guān)淺談React多個(gè)setState會(huì)調(diào)用幾次內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論