首頁(yè) 猿問為什么setState在react...

為什么setState在reactjs異步而不是同步？

JavaScript

暮色呼如 2019-07-01 10:12:58

為什么setState在reactjs異步而不是同步？我剛剛發(fā)現(xiàn)this.setState()函數(shù)在任何組件中都是異步的，或者是在調(diào)用它的函數(shù)完成后調(diào)用的?，F(xiàn)在我搜索并找到了這個(gè)博客(http：/www.benndel.com/blog/2893-setstate-state-誘變-操作-可能是同步的-in-reactjs.htm)他在這里發(fā)現(xiàn)setState是異步(當(dāng)堆棧為空時(shí)調(diào)用)或同步(一旦調(diào)用就調(diào)用)，這取決于狀態(tài)更改是如何觸發(fā)的?，F(xiàn)在這兩件事很難理解。在博客中setState函數(shù)在函數(shù)內(nèi)部調(diào)用。updateState，但是什么引發(fā)了updateState函數(shù)不是被調(diào)用的函數(shù)所知道的。他們?yōu)槭裁匆猻etState異步，因?yàn)镴S是單線程語(yǔ)言，并且這個(gè)setState不是WebAPI或服務(wù)器調(diào)用，所以必須只在JS的線程上完成。他們這樣做是為了使重新呈現(xiàn)不會(huì)停止所有的事件偵聽器和其他東西，或者還有其他一些設(shè)計(jì)問題。

查看完整描述

3 回答

長(zhǎng)風(fēng)秋雁

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊

可以在狀態(tài)值更新后調(diào)用函數(shù)：

this.setState({foo: 'bar'}, () => { 
    // Do something here. });

此外，如果您一次要更新許多狀態(tài)，請(qǐng)將它們分組在相同的范圍內(nèi)。setState:

而不是：

this.setState({foo: "one"}, () => {
    this.setState({bar: "two"});});

就這么做吧：

this.setState({
    foo: "one",
    bar: "two"});

反對(duì) 回復(fù) 2019-07-01

滄海一幻覺

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊

1.)setState操作是異步的，為了提高性能而批處理。這一點(diǎn)在SET國(guó)家的文件中作了解釋。

setState()不會(huì)立即改變這個(gè).state，而是創(chuàng)建一個(gè)掛起的狀態(tài)轉(zhuǎn)換。調(diào)用此方法后訪問this.state可能會(huì)返回現(xiàn)有值。不能保證同步運(yùn)行對(duì)setState的調(diào)用，調(diào)用可以批處理以獲得性能增益。

2.)為什么他們要使setState異步，因?yàn)镴S是單線程語(yǔ)言，而這個(gè)setState不是WebAPI或服務(wù)器調(diào)用：

這是因?yàn)閟etState改變了狀態(tài)并導(dǎo)致重命名。這可能是一項(xiàng)昂貴的操作，使其同步可能會(huì)使瀏覽器無(wú)法響應(yīng)。
因此，setState調(diào)用是異步的，并且是批處理的，以獲得更好的UI體驗(yàn)和性能。

反對(duì) 回復(fù) 2019-07-01