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

zhoutk 發(fā)布于2019-08-22 18:25 / 3141人閱讀

摘要：接上文，流程圖我們已經(jīng)知道掛載的工作流程，現(xiàn)在我們換個方向研究下方法，這個也是的重要組成部分。這個問題，我們會在下一篇文章中進行解答。。。

接上文，

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

this.setState

我們已經(jīng)知道掛載的工作流程，現(xiàn)在我們換個方向研究下--setState方法，這個也是React的重要組成部分。

首先，為什么我們可以在一些方法中調(diào)用setState方法呢？顯然，我們的組件是從ReactComponent組件繼承下來的。我們?nèi)eact源碼中看下setState方法的實現(xiàn)：

//srcisomorphicmodernclassReactComponent.js#68
this.updater.enqueueSetState(this, partialState)

正如你所見的那樣，代碼里有updater的相關(guān)調(diào)用，那么，什么是updater呢？在我們對掛載過程的分析中，mountComponent的調(diào)用過程里，實例會接收一個updater，作為對
ReactUpdateQueue的引用（srcrendererssharedstackreconcilerReactUpdateQueue.js）

深入到enqueueSetState方法中，在起初，React會將partial state對象（通過this.setState傳入的對象）壓入到內(nèi)部實例的_pendingStateQueue中（公共實例，指的是這種自定義實例，而內(nèi)部實例，則是指掛載過程中創(chuàng)建的ReactCompositeComponent組件）。緊接著，在調(diào)用enqueueUpdate方法的過程中，會檢查是否組件在更新過程中并將自定義組件壓入到dirtyComponent的列表里，
如果沒有在更新過程中，則初始化更新事務(wù)并壓入組件到dirtyComponent里。

概括下，每個組件都是有自己的阻塞狀態(tài)列表，每次你在一次事務(wù)中調(diào)用setState方法，
其實只是將對象壓入到一個隊列里，然后，它們會依次合并成一個狀態(tài)。同時，當(dāng)你調(diào)用setState方法時，React會將你的組件壓入到dirtyComponent的列表里。看到這里，你可能會有疑問，dirtyComponent是如何工作的。這個問題，我們會在下一篇文章中進行解答。。。
（未完待續(xù)）