資訊專欄INFORMATION COLUMN
摘要：但是事實(shí)上，標(biāo)簽是生成了，但是不管他叫什么不是真正的標(biāo)簽。是個(gè)工具類，用于執(zhí)行一些樹數(shù)據(jù)結(jié)構(gòu)的真正作用于的相關(guān)操作。終于，在掛載過程中被創(chuàng)建的元素被插入到文檔中。我們檢查下的包裝器，它是用來處理的。
接上文，
React流程圖：
https://bogdan-lyashenko.gith...
作為掛載方法執(zhí)行之后的輸出，我們得到了將用于插入DOM樹的HTML元素。但是事實(shí)上，標(biāo)簽是生成了，但是mountComponenent--不管他叫什么---不是真正的HTML標(biāo)簽。它其實(shí)是一種擁有字段children，node（真正的DOM節(jié)點(diǎn)）等的數(shù)據(jù)結(jié)構(gòu)。當(dāng)我們將HTML元素插入到DOM中指定的容器時(shí)（在ReactDOM.render方法中指定的容器），React會(huì)將容器中插入位置之前的內(nèi)容給刪除。DOMLazyTree是個(gè)工具類，用于執(zhí)行一些樹數(shù)據(jù)結(jié)構(gòu)的真正作用于DOM的相關(guān)操作。
在最好的過程中，會(huì)執(zhí)行parentNode.insertBefore(tree.node)方法，其中，parentNode是插入的容器中div節(jié)點(diǎn)，而tree.node則是我們真正的ExamleApplication對(duì)應(yīng)的div節(jié)點(diǎn)。終于，在掛載過程中被創(chuàng)建的HTML元素被插入到DOM文檔中。
其實(shí)，上面步驟不是全部，如前文所講，對(duì)掛載的調(diào)用是被包裝進(jìn)了一個(gè)事務(wù)中。也就是說，我們需要調(diào)用close方法來關(guān)閉這個(gè)事務(wù)。我們看下close包裝器列表，大多數(shù)情況下，我們需要恢復(fù)一些鎖定的行為，比如ReactInputSelection.restoreSelection(),ReactBrowserEventEmitter.setEnabled(previouslyEabled),同時(shí)，也需要通過this.reactMountReady.notifyAll來通知執(zhí)行所有之前放入transaction.reactMountReady隊(duì)列里的回調(diào)。其中之一就是componentDidMount方法，這個(gè)方法會(huì)在close包裝器里被觸發(fā)。
現(xiàn)在，你應(yīng)該對(duì)component did mount的含義有個(gè)比較清楚的認(rèn)識(shí)了。
在掛載過程中，使用的事務(wù)不止上文的那一個(gè)，還有一個(gè)我們之前用來包裝ReactMount.atchedMountComponentIntoNode的調(diào)用。這個(gè)是需要關(guān)閉。
我們檢查下ReactUpdates.flushBatchedUpdates的包裝器，它是用來處理dirtyComponents的。我們剛剛完成了我們的第一次掛載，這時(shí)候是沒有dirtycomponents的，也就是說，在這次掛載中，它是一個(gè)空調(diào)用。所以，我們可以關(guān)閉這次事務(wù)，并且可以說，批量更新策略已經(jīng)完成了。
（未完待續(xù)）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95827.html
摘要：技術(shù)上來說，當(dāng)方法被調(diào)用后或者發(fā)生改變后，方法都會(huì)被調(diào)用。下一步，會(huì)設(shè)置為。之后，檢測(cè)當(dāng)前更新是否由更新引起的。這是因?yàn)?，使用是?dǎo)致組件持久化更新，而會(huì)被方法的返回值重新賦值。 接上文， React流程圖：https://bogdan-lyashenko.gith... 更新組件 關(guān)于組件的更新，我們先看下代碼里的注釋： 對(duì)于已掛載組件的更新過程，React會(huì)首先調(diào)用component...
摘要：接上文，流程圖我們已經(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的重要組成部分。 首先，為什么我...
摘要：源碼里有個(gè)獨(dú)立的模塊管理組件的所有子元素。第一個(gè)，實(shí)例化子元素使用并掛載它們。至于具體掛載流程，基于子元素類型的不同而有不同的掛載過程。掛載的過程基本完成了。 接上文， React流程圖：https://bogdan-lyashenko.gith... 創(chuàng)建初始子組件 在之前的步驟里，組件本身的構(gòu)建已經(jīng)完成，接下去，我們分析它們的子元素。總共分為兩步：掛載子元素（this.mountC...
摘要：當(dāng)鼠標(biāo)事件發(fā)生時(shí)，組件的最外層會(huì)進(jìn)行處理，然后通過幾層包裝器的處理后，會(huì)開始進(jìn)行批量更新操作。在這之后，會(huì)將這些事件處理成常見到樣子。 接上文， React流程圖：https://bogdan-lyashenko.gith... 回到最初 在流程圖中，也許你已經(jīng)注意到，setState方法可以通過幾種方式觸發(fā)，更準(zhǔn)確的說，可以分為是否由外部引起的（也就是是否由用戶觸發(fā)）。讓我們看下如下...
摘要：接著，將返回的元素和之前的進(jìn)行比較的，以驗(yàn)證是否真的需要更新。我們看下代碼，代碼比較簡(jiǎn)單好，對(duì)應(yīng)于我們的這個(gè)列子，我們對(duì)于方法的更改并不會(huì)對(duì)方法造成影響。所以我們進(jìn)入下一步，也就是對(duì)于節(jié)點(diǎn)的更新。 接上文， React流程圖：https://bogdan-lyashenko.gith... 如果組件真的需要更新 在組件剛開始更新過程時(shí)，如果有定義componentWillUpdate方...
閱讀 2490·2021-11-24 09:39
閱讀 3532·2019-08-30 15:53
閱讀 607·2019-08-29 15:15
閱讀 2913·2019-08-26 13:23
閱讀 3228·2019-08-26 10:48
閱讀 654·2019-08-26 10:31
閱讀 780·2019-08-26 10:30
閱讀 2374·2019-08-23 18:32
