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

SnaiLiu 發(fā)布于2019-08-22 18:29 / 513人閱讀

摘要：當(dāng)鼠標(biāo)事件發(fā)生時(shí)，組件的最外層會(huì)進(jìn)行處理，然后通過(guò)幾層包裝器的處理后，會(huì)開(kāi)始進(jìn)行批量更新操作。在這之后，會(huì)將這些事件處理成常見(jiàn)到樣子。

接上文，

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

回到最初

在流程圖中，也許你已經(jīng)注意到，setState方法可以通過(guò)幾種方式觸發(fā)，更準(zhǔn)確的說(shuō)，可以分為是否由外部引起的（也就是是否由用戶觸發(fā)）。讓我們看下如下兩個(gè)列子，第一個(gè)中，
是由鼠標(biāo)點(diǎn)擊觸發(fā)的，第二個(gè)中，是在componentDidMount中由setTimeout方法中被觸發(fā)的。

為什么會(huì)有這些不同呢？如果你還有印象，在之前的文章中，React對(duì)于更新的處理是批量的，也就是說(shuō)，一系列更新操作會(huì)通過(guò)某種方式被收集起來(lái)，然后統(tǒng)一刷新到頁(yè)面上。當(dāng)鼠標(biāo)事件發(fā)生時(shí)，組件的最外層會(huì)進(jìn)行處理，然后通過(guò)幾層包裝器的處理后，會(huì)開(kāi)始進(jìn)行批量更新操作。注意，批量更新操作的前提是確保ReactEventListener處于enabled狀態(tài)，而且，在前文提到過(guò)，在組件的掛載階段，ReactReconcileTransaction包裝器中的一個(gè)會(huì)先關(guān)閉它，以確保整個(gè)掛載過(guò)程的安全。至于setTimeout中的調(diào)用，則是在將組件放入dirtyComponents列表之前，React會(huì)確保事務(wù)處于打開(kāi)狀態(tài)，在這之后，關(guān)閉事務(wù)包裝器，然后將更新刷新到頁(yè)面上。

正如你所知，React實(shí)現(xiàn)了合成事件，在一下原生事件包裹了一些合成語(yǔ)法糖。在這之后，React會(huì)將這些事件處理成常見(jiàn)到樣子。看下如下代碼里到注釋?zhuān)?/p>

為了更好地開(kāi)發(fā)，通過(guò)模擬真實(shí)游覽器事件，我們可以得到更好開(kāi)發(fā)工具整合過(guò)程（To help development we can get better dev tool integration by simulating a real browser event’）

var fakeNode = document.createElement("react");

ReactErrorUtils.invokeGuardedCallback = function (name, func, a) {
      var boundFunc = func.bind(null, a);
      var evtType = "react-" + name;

      fakeNode.addEventListener(evtType, boundFunc, false);

      var evt = document.createEvent("Event");
      evt.initEvent(evtType, false, false);

      fakeNode.dispatchEvent(evt);
      fakeNode.removeEventListener(evtType, boundFunc, false);
};

回到我們的更新流程，我們?cè)谶@里總結(jié)下大概的步驟：
1 調(diào)用setState方法
2 如果批量事務(wù)未處于開(kāi)啟狀態(tài)，則打開(kāi)該事務(wù)
3 將受影響組件添加到dirtyComponents列表里
4 通過(guò)調(diào)用ReactUpdates.flushBatchedUpdates方法關(guān)閉事務(wù)，也就意味著開(kāi)始對(duì)dirtyComponents列表進(jìn)行處理。

（未完待續(xù)）