【Under-the-hood-ReactJS-Part8】React源碼解讀

接上文,

React流程圖:
https://bogdan-lyashenko.gith…

this.setState

我們已曉得掛載的事情流程,如今我們換個方向研討下–setState要領,這個也是React的主要組成部分。

起首,為何我們能夠在一些要領中挪用setState要領呢?明顯,我們的組件是從ReactComponent組件繼續下來的。我們去React源碼中看下setState要領的完成:

//src\isomorphic\modern\class\ReactComponent.js#68
this.updater.enqueueSetState(this, partialState)

正如你所見的那樣,代碼里有updater的相干挪用,那末,什麼是updater呢?在我們對掛載歷程的剖析中,mountComponent的挪用歷程里,實例會吸收一個updater,作為對
ReactUpdateQueue的援用(srcrendererssharedstackreconcilerReactUpdateQueue.js)

深切到enqueueSetState要領中,在早先,React會將partial state對象(經由過程this.setState傳入的對象)壓入到內部實例的_pendingStateQueue中(大眾實例,指的是<ExampleApplicatioin>這類自定義實例,而內部實例,則是指掛載歷程當中建立的ReactCompositeComponent組件)。緊接着,在挪用enqueueUpdate要領的歷程當中,會搜檢是不是組件在更新曆程當中並將自定義組件壓入到dirtyComponent的列內外,
假如沒有在更新曆程當中,則初始化更新事件並壓入組件到dirtyComponent里。

歸納綜合下,每一個組件都是有本身的阻塞狀況列表,每次你在一次事件中挪用setState要領,
實在只是將對象壓入到一個行列里,然後,它們會順次合併成一個狀況。同時,當你挪用setState要領時,React會將你的組件壓入到dirtyComponent的列內外。看到這裏,你可能會有疑問,dirtyComponent是怎樣事情的。這個題目,我們會在下一篇文章中舉行解答。。。
(未完待續)

    原文作者:剡山
    原文地址: https://segmentfault.com/a/1190000015439491
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞