為什么setState是異步的

總結博文

github上面dan解釋了為什么react setState為什么是異步的。

前提:

首先我們都應該同意如果setState()方法同步re-render在很多情況下是很差的選擇。將setState的改變的效果進入隊列有序,并在某個特定的時間節(jié)點合并性誉,一起刷新state是一個很好的機制领猾。

舉個例子:如果我們給父節(jié)點和子節(jié)點兩個組件最疆,都綁定了點擊事件,當他們要觸發(fā)setState的時候每聪,我們并不希望事件的冒泡,導致子節(jié)點被re-render兩次齿风。我們更希望將父子節(jié)點標記為dirty(臟)組件药薯,在
事件結束之前,一起re-render父子節(jié)點救斑。

下面是dan給出的兩個理由:

1.保證內(nèi)部(數(shù)據(jù))統(tǒng)一

首先童本,我們假定setState是同步的那么:


console.log(this.state.value) // 0
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 1
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 2


這種只用到了state的情況下,同步setState是可以的脸候。

但是如果有props參與到了傳值穷娱,那么同步setState模式就會有問題,比如我們把
state提升到了父組件绑蔫,利用props將值傳導子組件:

console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0


導致這樣的結果主要原因是:當setState同步改變父節(jié)點state的時候,父節(jié)點傳遞給子節(jié)點的props是不能同步刷新的泵额,原因是上面提到的背景:setState時同步re-render是很差的機制配深,這一點已經(jīng)成為了共識,無法同步re-render就無法同步刷新this.props這就導致了子節(jié)點props數(shù)據(jù)嫁盲,和父節(jié)點state值不一致篓叶,這就破壞了保證內(nèi)部數(shù)據(jù)統(tǒng)一。

2.setState異步更新狀態(tài)使得并發(fā)更新組件成為可能

首先我們在這里討論是否同步刷新state有一個前提那就是我們默認更新節(jié)點是遵循特定的順序的羞秤。但是按默認順序更新組件在以后的react中可能就變了缸托。

在以后的react的更新機制中,我們可能加入setState優(yōu)先級這一概念瘾蛋。

舉個例子:比如你現(xiàn)在正在打字俐镐,那么TextBox組件需要實時的刷新。但是當你在輸入的時候瘦黑,來了一個信息京革,這個時候,可能讓信息延后刷新可能更符合交互幸斥。

異步rendering不僅僅是性能上的優(yōu)化匹摇,而且這可能是react組件模型在發(fā)生的根本性的改變。

當然這個理由甲葬,可能是react發(fā)展的一個方向廊勃,目前還沒有實現(xiàn)。

setState總結:

setState總結
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末经窖,一起剝皮案震驚了整個濱河市坡垫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌画侣,老刑警劉巖冰悠,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異配乱,居然都是意外死亡溉卓,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門搬泥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來桑寨,“玉大人,你說我怎么就攤上這事忿檩∥疚玻” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵燥透,是天一觀的道長沙咏。 經(jīng)常有香客問我辨图,道長,這世上最難降的妖魔是什么芭碍? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任徒役,我火速辦了婚禮,結果婚禮上窖壕,老公的妹妹穿的比我還像新娘忧勿。我一直安慰自己,他們只是感情好瞻讽,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布鸳吸。 她就那樣靜靜地躺著,像睡著了一般速勇。 火紅的嫁衣襯著肌膚如雪晌砾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天烦磁,我揣著相機與錄音养匈,去河邊找鬼。 笑死都伪,一個胖子當著我的面吹牛呕乎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播陨晶,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼猬仁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了先誉?” 一聲冷哼從身側響起湿刽,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎褐耳,沒想到半個月后诈闺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡铃芦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年买雾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片杨帽。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖嗤军,靈堂內(nèi)的尸體忽然破棺而出注盈,到底是詐尸還是另有隱情,我是刑警寧澤叙赚,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布老客,位于F島的核電站僚饭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏胧砰。R本人自食惡果不足惜鳍鸵,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望尉间。 院中可真熱鬧偿乖,春花似錦、人聲如沸哲嘲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽眠副。三九已至画切,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間囱怕,已是汗流浹背霍弹。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留娃弓,地道東北人典格。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像忘闻,于是被迫代替她去往敵國和親钝计。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容