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

接上文,

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

回到最初

作為掛載要領實行以後的輸出,我們得到了將用於插進去DOM樹的HTML元素。然則事實上,標籤是生成了,然則mountComponenent–不論他叫什麼—不是真正的HTML標籤。它實際上是一種具有字段children,node(真正的DOM節點)等的數據結構。當我們將HTML元素插進去到DOM中指定的容器時(在ReactDOM.render要領中指定的容器),React會將容器中插進去位置之前的內容給刪除。DOMLazyTree是個東西類,用於實行一些樹數據結構的真正作用於DOM的相干操縱。
在最好的歷程當中,會實行parentNode.insertBefore(tree.node)要領,个中,parentNode是插進去的容器中div節點,而tree.node則是我們真正的ExamleApplication對應的div節點。終究,在掛載歷程當中被建立的HTML元素被插進去到DOM文檔中。

實在,上面步驟不是悉數,如前文所講,對掛載的挪用是被包裝進了一個事件中。也就是說,我們須要挪用close要領來封閉這個事件。我們看下close包裝器列表,大多數情況下,我們須要恢復一些鎖定的行動,比方ReactInputSelection.restoreSelection(),ReactBrowserEventEmitter.setEnabled(previouslyEabled),同時,也須要經由過程this.reactMountReady.notifyAll來關照實行一切之前放入transaction.reactMountReady行列里的回調。个中之一就是componentDidMount要領,這個要領會在close包裝器里被觸發。
如今,你應當對component did mount的寄義有個比較清楚的認識了。

更多有關封閉事件

在掛載歷程當中,運用的事件不止上文的那一個,另有一個我們之前用來包裝ReactMount.atchedMountComponentIntoNode的挪用。這個是須要封閉。

我們搜檢下ReactUpdates.flushBatchedUpdates的包裝器,它是用來處置懲罰dirtyComponents的。我們方才完成了我們的第一次掛載,這時候是沒有dirtycomponents的,也就是說,在此次掛載中,它是一個空挪用。所以,我們能夠封閉此次事件,而且能夠說,批量更新戰略已完成了。
(未完待續)

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