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

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

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

接上文，

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

this.setState

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

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

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

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

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

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