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

接上文，

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

回到最初

在流程圖中，也許你已經注意到，setState方法能夠經過幾種方式觸發，更準確的說，能夠分爲是否由外部引發的（也就是是否由用戶觸發）。讓咱們看下以下兩個列子，第一個中，
是由鼠標點擊觸發的，第二個中，是在componentDidMount中由setTimeout方法中被觸發的。

爲何會有這些不一樣呢？若是你還有印象，在以前的文章中，React對於更新的處理是批量的，也就是說，一系列更新操做會經過某種方式被收集起來，而後統一刷新到頁面上。當鼠標事件發生時，組件的最外層會進行處理，而後經過幾層包裝器的處理後，會開始進行批量更新操做。注意，批量更新操做的前提是確保ReactEventListener處於enabled狀態，並且，在前文提到過，在組件的掛載階段，ReactReconcileTransaction包裝器中的一個會先關閉它，以確保整個掛載過程的安全。 至於setTimeout中的調用，則是在將組件放入dirtyComponents列表以前，React會確保事務處於打開狀態，在這以後，關閉事務包裝器，而後將更新刷新到頁面上。

正如你所知，React實現了合成事件，在一下原生事件包裹了一些合成語法糖。在這以後，React會將這些事件處理成常見到樣子。看下以下代碼裏到註釋：

爲了更好地開發，經過模擬真實遊覽器事件，咱們能夠獲得更好開發工具整合過程（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);
};

回到咱們的更新流程，咱們在這裏總結下大概的步驟：
1 調用setState方法
2 若是批量事務未處於開啓狀態，則打開該事務
3 將受影響組件添加到dirtyComponents列表裏
4 經過調用ReactUpdates.flushBatchedUpdates方法關閉事務，也就意味着開始對dirtyComponents列表進行處理。

（未完待續）