react源碼解析之stack reconciler

ReactDOM.render(, rootEl);

console.log();
// { type: App, props: {} }

由子級(jí)組件生成的DOM節(jié)點(diǎn)將被追加到DOM父節(jié)點(diǎn)，同時(shí)整的DOM結(jié)構(gòu)會(huì)被遞歸裝配。

注意:
協(xié)調(diào)器本身(reconciler)并不與DOM捆綁。裝載(mounting)的具體結(jié)果（有時(shí)在源代碼中稱為“裝載映像”）取決于渲染器(renderer)，可能為 DOM節(jié)點(diǎn)（React DOM）、字符串（React DOM服務(wù)器）或表示本機(jī)視圖的數(shù)值（React Native）。

我們來(lái)擴(kuò)展一下代碼，以處理主機(jī)元素（host elements）:

function isClass(type) {
  //  React.Component 子類含有這一標(biāo)志
  return (
    Boolean(type.prototype) &&
    Boolean(type.prototype.isReactComponent)
  );
}

// 該函數(shù)僅處理含復(fù)合類型的元素。  例如，它處理和，但不處理
。
function mountComposite(element) {
  var type = element.type;
  var props = element.props;

  var renderedElement;
  if (isClass(type)) {
    // 組件類
    var publicInstance = new type(props);
    // 設(shè)置屬性
    publicInstance.props = props;
    // 若必要，則調(diào)用生命周期函數(shù)
    if (publicInstance.componentWillMount) {
      publicInstance.componentWillMount();
    }
    renderedElement = publicInstance.render();
  } else if (typeof type === "function") {
    // 組件函數(shù)
    renderedElement = type(props);
  }

  // 該過(guò)程是遞歸，一旦該元素為主機(jī)（如
｝而非復(fù)合（如）時(shí)，則逐漸結(jié)束
  return mount(renderedElement);
}

// 該函數(shù)僅處理含主機(jī)類型的元素(handles elements with a host type)。 例如，它處理
和
但不處理。
function mountHost(element) {
  var type = element.type;
  var props = element.props;
  var children = props.children || [];
  if (!Array.isArray(children)) {
    children = [children];
  }
  children = children.filter(Boolean);

  // 該代碼塊不可出現(xiàn)在協(xié)調(diào)器(reconciler)中。
  // 不同渲染器(renderers)可能會(huì)以不同方式初始化節(jié)點(diǎn)。
  // 例如，React Native會(huì)生成iOS或Android視圖。
  var node = document.createElement(type);
  Object.keys(props).forEach(propName => {
    if (propName !== "children") {
      node.setAttribute(propName, props[propName]);
    }
  });

  // 裝載子節(jié)點(diǎn)
  children.forEach(childElement => {
    // 子節(jié)點(diǎn)有可能是主機(jī)元素（如
）或復(fù)合元素（如）.
    // 所以我們應(yīng)該遞歸的裝載
    var childNode = mount(childElement);

    // 此行代碼仍是特定于渲染器的。不同的渲染器則會(huì)使用不同的方法
    node.appendChild(childNode);
  });

  // 返回DOM節(jié)點(diǎn)作為裝載結(jié)果
  // 此處即為遞歸結(jié)束.
  return node;
}

function mount(element) {
  var type = element.type;
  if (typeof type === "function") {
    // 用戶定義的組件
    return mountComposite(element);
  } else if (typeof type === "string") {
    // 平臺(tái)相關(guān)的組件，比如說(shuō)瀏覽器中的div，ios和安卓中的視圖
    return mountHost(element);
  }
}

var rootEl = document.getElementById("root");
var node = mount();
rootEl.appendChild(node);

該代碼能夠工作但仍與協(xié)調(diào)器（reconciler）的真正實(shí)現(xiàn)相差甚遠(yuǎn)。其所缺少的關(guān)鍵部分是對(duì)更新的支持。

React 的關(guān)鍵特征是您可以重新渲染所有內(nèi)容, 它不會(huì)重新創(chuàng)建 DOM 或重置狀態(tài):

ReactDOM.render(, rootEl);
// 應(yīng)該重新使用現(xiàn)存的 DOM:
ReactDOM.render(, rootEl);

但是, 上面的實(shí)現(xiàn)只知道如何裝載初始樹(shù)。它無(wú)法對(duì)其執(zhí)行更新, 因?yàn)樗鼪](méi)有存儲(chǔ)所有必需的信息, 例如所有 publicInstance ,
或者哪個(gè) DOM 節(jié)點(diǎn) 對(duì)應(yīng)于哪些組件。

堆棧協(xié)調(diào)（stack reconciler）的基本代碼是通過(guò)使 mount () 函數(shù)成為一個(gè)方法并將其放在類上來(lái)解決這一問(wèn)題。
這種方式有一些缺陷，但是目前代碼中仍然使用的是這種方式。不過(guò)目前我們也正在重寫(xiě)協(xié)調(diào)器（reconciler）

我們將創(chuàng)建兩個(gè)類: DOMComponent 和 CompositeComponent , 而不是多帶帶的 mountHost 和 mountComposite 函數(shù)。

兩個(gè)類都有一個(gè)接受 element 的構(gòu)造函數(shù), 以及一個(gè)能返回已裝入節(jié)點(diǎn)的 mount () 方法。我們將用一個(gè)能實(shí)例化正確類的工廠函數(shù)替換掉之前
例子里的mount函數(shù)：

function instantiateComponent(element) {
  var type = element.type;
  if (typeof type === "function") {
    // 用戶自定義組件
    return new CompositeComponent(element);
  } else if (typeof type === "string") {
    // 特定于平臺(tái)的組件
    return new DOMComponent(element);
  }  
}

首先, 讓我們考慮如何實(shí)現(xiàn) CompositeComponent:

class CompositeComponent {
  constructor(element) {
    this.currentElement = element;
    this.renderedComponent = null;
    this.publicInstance = null;
  }

  getPublicInstance() {
    // 針對(duì)復(fù)合組合, 返回類的實(shí)例.
    return this.publicInstance;
  }

  mount() {
    var element = this.currentElement;
    var type = element.type;
    var props = element.props;

    var publicInstance;
    var renderedElement;
    if (isClass(type)) {
      // 組件類
      publicInstance = new type(props);
      // 設(shè)置屬性
      publicInstance.props = props;
      // 如果有必要，調(diào)用生命周期
      if (publicInstance.componentWillMount) {
        publicInstance.componentWillMount();
      }
      renderedElement = publicInstance.render();
    } else if (typeof type === "function") {
      // Component function
      publicInstance = null;
      renderedElement = type(props);
    }

    // Save the public instance
    this.publicInstance = publicInstance;

    // 通過(guò)element實(shí)例化內(nèi)部的child實(shí)例，這個(gè)實(shí)例有可能是DOMComponent，比如
 or 

    // 也可能是CompositeComponent 比如說(shuō) or 
    var renderedComponent = instantiateComponent(renderedElement);
    this.renderedComponent = renderedComponent;

    // 增加渲染輸出
    return renderedComponent.mount();
  }
}

這與我們以前的 mountComposite() 實(shí)現(xiàn)沒(méi)有太大的不同, 但現(xiàn)在我們可以保存一些信息,
比如this.currentElement、this.renderedComponent 和 this.publicInstance ,這些保存的信息會(huì)在更新期間被使用。

請(qǐng)注意, CompositeComponent的實(shí)例與用戶提供的 element.type 的實(shí)例不是一回事。
CompositeComponent是我們的協(xié)調(diào)器（reconciler）的一個(gè)實(shí)現(xiàn)細(xì)節(jié), 從不向用戶公開(kāi)。
用戶自定義類是我們從 element.type 讀取的，并且通過(guò) CompositeComponent 創(chuàng)建它的一個(gè)實(shí)例。

為避免混亂，我們將CompositeComponent和DOMComponent的實(shí)例稱為“內(nèi)部實(shí)例”。
由于它們的存在, 我們可以將一些長(zhǎng)壽數(shù)據(jù)（ong-lived）與它們關(guān)聯(lián)起來(lái)。只有渲染器（renderer）和協(xié)調(diào)器（reconciler）知道它們的存在。

另一方面, 我們將用戶定義的類的實(shí)例稱為 "公共實(shí)例"（public instance）。公共實(shí)例是您在 render() 和自定義組件的其他方法中看到的 this

mountHost() 函數(shù)被重構(gòu)為 DOMComponent 類上的 mount()方法, 也看起來(lái)很熟悉:

class DOMComponent {
  constructor(element) {
    this.currentElement = element;
    this.renderedChildren = [];
    this.node = null;
  }

  getPublicInstance() {
    // For DOM components, only expose the DOM node.
    return this.node;
  }

  mount() {
    var element = this.currentElement;
    var type = element.type;
    var props = element.props;
    var children = props.children || [];
    if (!Array.isArray(children)) {
      children = [children];
    }

    // Create and save the node
    var node = document.createElement(type);
    this.node = node;

    // Set the attributes
    Object.keys(props).forEach(propName => {
      if (propName !== "children") {
        node.setAttribute(propName, props[propName]);
      }
    });

    // Create and save the contained children.
    // Each of them can be a DOMComponent or a CompositeComponent,
    // depending on whether the element type is a string or a function.
    var renderedChildren = children.map(instantiateComponent);
    this.renderedChildren = renderedChildren;

    // Collect DOM nodes they return on mount
    var childNodes = renderedChildren.map(child => child.mount());
    childNodes.forEach(childNode => node.appendChild(childNode));

    // Return the DOM node as mount result
    return node;
  }
}

從 mountHost () 重構(gòu)后的主要區(qū)別在于, 我們現(xiàn)在將 this.node 和 this.renderedChildren 與內(nèi)部 DOM 組件實(shí)例相關(guān)聯(lián)。
我們還將使用它們?cè)趯?lái)應(yīng)用非破壞性更新。

因此, 每個(gè)內(nèi)部實(shí)例 (復(fù)合實(shí)例或主機(jī)實(shí)例)（composite or host） 現(xiàn)在都指向內(nèi)部的子實(shí)例。為幫助可視化, 如果功能 組件呈現(xiàn) 類組件, 并且 類呈現(xiàn)

, 則內(nèi)部實(shí)例樹(shù)將如下所顯示:

[object CompositeComponent] {
  currentElement: ,
  publicInstance: null,
  renderedComponent: [object CompositeComponent] {
    currentElement: 

, publicInstance: [object Button], renderedComponent: [object DOMComponent] { currentElement:

, node: [object HTMLDivElement], renderedChildren: [] } } }

在 DOM 中, 您只會(huì)看到

。但是, 內(nèi)部實(shí)例樹(shù)同時(shí)包含復(fù)合和主機(jī)內(nèi)部實(shí)例（composite and host internal instances）。

內(nèi)部的復(fù)合實(shí)例需要存儲(chǔ)下面的信息:

當(dāng)前元素（The current element）.

如果元素類型是類, 則將類實(shí)例化并存為公共實(shí)例（The public instance if element type is a class）.

一個(gè)通過(guò)運(yùn)行render()之后并傳入工廠函數(shù)而得到的內(nèi)部實(shí)例（renderedComponent）。它可以是一個(gè)DOMComponent或一個(gè)CompositeComponent。

內(nèi)部的主機(jī)實(shí)例需要存儲(chǔ)下面的信息:

當(dāng)前元素（The current element）.

DOM 節(jié)點(diǎn)（The DOM node）.

所有的內(nèi)部子實(shí)例，他們可以是 DOMComponent or a CompositeComponent。（All the child internal instances. Each of them can be either a DOMComponent or a CompositeComponent）.

如果你很難想象一個(gè)內(nèi)部的實(shí)例樹(shù)是如何在更復(fù)雜的應(yīng)用中構(gòu)建的， React DevTools)可以給出一個(gè)非常接近的近似，因?yàn)樗怀鲲@示了帶有灰色的主機(jī)實(shí)例，以及用紫色表示的組合實(shí)例:

為了完成這個(gè)重構(gòu)，我們將引入一個(gè)函數(shù)，它將一個(gè)完整的樹(shù)掛載到一個(gè)容器節(jié)點(diǎn)，就像ReactDOM.render()。它返回一個(gè)公共實(shí)例，也類似于 ReactDOM.render():

function mountTree(element, containerNode) {
  // 創(chuàng)建頂級(jí)內(nèi)部實(shí)例
  var rootComponent = instantiateComponent(element);

  // 將頂級(jí)組件裝載到容器中
  var node = rootComponent.mount();
  containerNode.appendChild(node);

  // 返回它所提供的公共實(shí)例
  var publicInstance = rootComponent.getPublicInstance();
  return publicInstance;
}

var rootEl = document.getElementById("root");
mountTree(, rootEl);

卸載(Unmounting)

現(xiàn)在，我們有了保存有它們的子節(jié)點(diǎn)和DOM節(jié)點(diǎn)的內(nèi)部實(shí)例，我們可以實(shí)現(xiàn)卸載。對(duì)于一個(gè)復(fù)合組件（composite component），卸載將調(diào)用一個(gè)生命周期鉤子然后遞歸進(jìn)行。

class CompositeComponent {

  // ...

  unmount() {
    // Call the lifecycle hook if necessary
    var publicInstance = this.publicInstance;
    if (publicInstance) {
      if (publicInstance.componentWillUnmount) {
        publicInstance.componentWillUnmount();
      }
    }

    // Unmount the single rendered component
    var renderedComponent = this.renderedComponent;
    renderedComponent.unmount();
  }
}

對(duì)于DOMComponent，卸載操作讓每個(gè)孩子進(jìn)行卸載：

class DOMComponent {

  // ...

  unmount() {
    // Unmount all the children
    var renderedChildren = this.renderedChildren;
    renderedChildren.forEach(child => child.unmount());
  }
}

在實(shí)踐中，卸載DOM組件也會(huì)刪除事件偵聽(tīng)器并清除一些緩存，為了便于理解，我們暫時(shí)跳過(guò)這些細(xì)節(jié)。

現(xiàn)在我們可以添加一個(gè)頂級(jí)函數(shù)，叫作unmountTree(containerNode)，它與ReactDOM.unmountComponentAtNode()類似:

function unmountTree(containerNode) {
  // Read the internal instance from a DOM node:
  // (This doesn"t work yet, we will need to change mountTree() to store it.)
  var node = containerNode.firstChild;
  var rootComponent = node._internalInstance;

  // Unmount the tree and clear the container
  rootComponent.unmount();
  containerNode.innerHTML = "";
}

為了使其工作，我們需要從一個(gè)DOM節(jié)點(diǎn)讀取一個(gè)內(nèi)部根實(shí)例。我們將修改 mountTree() 以將 _internalInstance 屬性添加到DOM 根節(jié)點(diǎn)。
我們也將教mountTree()去銷毀任何現(xiàn)存樹(shù)，以便將來(lái)它可以被多次調(diào)用：

function mountTree(element, containerNode) {
  // Destroy any existing tree
  if (containerNode.firstChild) {
    unmountTree(containerNode);
  }

  // Create the top-level internal instance
  var rootComponent = instantiateComponent(element);

  // Mount the top-level component into the container
  var node = rootComponent.mount();
  containerNode.appendChild(node);

  // Save a reference to the internal instance
  node._internalInstance = rootComponent;

  // Return the public instance it provides
  var publicInstance = rootComponent.getPublicInstance();
  return publicInstance;
}

現(xiàn)在，可以反復(fù)運(yùn)行unmountTree()或者 mountTree()，清除舊樹(shù)并且在組件上運(yùn)行 componentWillUnmount() 生命周期鉤子。

更新（Updating）

在上一節(jié)中，我們實(shí)現(xiàn)了卸載。然而，如果每個(gè)組件的prop的變動(dòng)都要卸載并掛載整個(gè)樹(shù)，這是不可接受的。幸好我們?cè)O(shè)計(jì)了協(xié)調(diào)器。
協(xié)調(diào)器（reconciler）的目標(biāo)是重用已存在的實(shí)例，以便保留DOM和狀態(tài):

var rootEl = document.getElementById("root");

mountTree(, rootEl);
// 應(yīng)該重用現(xiàn)有的DOM:
mountTree(, rootEl);

我們將用一種方法擴(kuò)展我們的內(nèi)部實(shí)例。
除了 mount()和 unmount()。DOMComponent和 CompositeComponent將實(shí)現(xiàn)一個(gè)新的方法，它叫作 receive(nextElement):

class CompositeComponent {
  // ...

  receive(nextElement) {
    // ...
  }
}

class DOMComponent {
  // ...

  receive(nextElement) {
    // ...
  }
}

它的工作是做任何必要的工作，以使組件(及其任何子節(jié)點(diǎn)) 能夠根據(jù) nextElement 提供的信息保持信息為最新?tīng)顟B(tài)。

這是經(jīng)常被描述為"virtual DOM diffing"的部分，盡管真正發(fā)生的是我們遞歸地遍歷內(nèi)部樹(shù)，并讓每個(gè)內(nèi)部實(shí)例接收到更新指令。

更新復(fù)合組件（Updating Composite Components）

當(dāng)一個(gè)復(fù)合組件接收到一個(gè)新元素（element）時(shí)，我們運(yùn)行componentWillUpdate()生命周期鉤子。

然后，我們使用新的props重新render組件，并獲得下一個(gè)render的元素（rendered element）：

class CompositeComponent {

  // ...

  receive(nextElement) {
    var prevProps = this.currentElement.props;
    var publicInstance = this.publicInstance;
    var prevRenderedComponent = this.renderedComponent;
    var prevRenderedElement = prevRenderedComponent.currentElement;

    // Update *own* element
    this.currentElement = nextElement;
    var type = nextElement.type;
    var nextProps = nextElement.props;

    // Figure out what the next render() output is
    var nextRenderedElement;
    if (isClass(type)) {
      // Component class
      // Call the lifecycle if necessary
      if (publicInstance.componentWillUpdate) {
        publicInstance.componentWillUpdate(nextProps);
      }
      // Update the props
      publicInstance.props = nextProps;
      // Re-render
      nextRenderedElement = publicInstance.render();
    } else if (typeof type === "function") {
      // Component function
      nextRenderedElement = type(nextProps);
    }

    // ...

下一步，我們可以看一下渲染元素的type。如果自從上次渲染，type 沒(méi)有被改變，組件接下來(lái)可以被適當(dāng)更新。

例如，如果它第一次返回

，并且第二次返回 ，我們可以告訴內(nèi)部實(shí)例去 receive() 下一個(gè)元素：

    // ...

    // 如果被渲染元素類型沒(méi)有被改變,
    // 重用現(xiàn)有的組件實(shí)例.
    if (prevRenderedElement.type === nextRenderedElement.type) {
      prevRenderedComponent.receive(nextRenderedElement);
      return;
    }

    // ...

但是，如果下一個(gè)被渲染元素和前一個(gè)相比有一個(gè)不同的type ，我們不能更新內(nèi)部實(shí)例。因?yàn)橐粋€(gè)

不“能變”為一個(gè) .

相反，我們必須卸載現(xiàn)有的內(nèi)部實(shí)例并掛載對(duì)應(yīng)于渲染的元素類型的新實(shí)例。
例如，這就是當(dāng)一個(gè)之前被渲染的元素

之后又被渲染成一個(gè) 的過(guò)程:

    // ...

    // If we reached this point, we need to unmount the previously
    // mounted component, mount the new one, and swap their nodes.

    // Find the old node because it will need to be replaced
    var prevNode = prevRenderedComponent.getHostNode();

    // Unmount the old child and mount a new child
    prevRenderedComponent.unmount();
    var nextRenderedComponent = instantiateComponent(nextRenderedElement);
    var nextNode = nextRenderedComponent.mount();

    // Replace the reference to the child
    this.renderedComponent = nextRenderedComponent;

    // Replace the old node with the new one
    // Note: this is renderer-specific code and
    // ideally should live outside of CompositeComponent:
    prevNode.parentNode.replaceChild(nextNode, prevNode);
  }
}

總而言之，當(dāng)一個(gè)復(fù)合組件（composite component）接收到一個(gè)新元素時(shí)，它可能會(huì)將更新委托給其渲染的內(nèi)部實(shí)例（（rendered internal instance），
或者卸載它，并在其位置上掛一個(gè)新元素。

另一種情況下，組件將重新掛載而不是接收一個(gè)元素，并且這發(fā)生在元素的key變化時(shí)。本文檔中，我們不討論key 處理，因?yàn)樗鼘⑹乖緩?fù)雜的教程更加復(fù)雜。

注意，我們需要添加一個(gè)叫作getHostNode()的新方法到內(nèi)部實(shí)例（internal instance），以便可以定位特定于平臺(tái)的節(jié)點(diǎn)并在更新期間替換它。
它的實(shí)現(xiàn)對(duì)兩個(gè)類都很簡(jiǎn)單：

class CompositeComponent {
  // ...

  getHostNode() {
    // 請(qǐng)求渲染的組件提供它（Ask the rendered component to provide it）.
    // 這將遞歸地向下鉆取任何組合(This will recursively drill down any composites).
    return this.renderedComponent.getHostNode();
  }
}

class DOMComponent {
  // ...

  getHostNode() {
    return this.node;
  }  
}

更新主機(jī)組件(Updating Host Components)

主機(jī)組件實(shí)現(xiàn)(例如DOMComponent), 是以不同方式更新.當(dāng)它們接收到一個(gè)元素時(shí)，它們需要更新底層特定于平臺(tái)的視圖。在 React DOM 中，這意味著更新 DOM 屬性：

class DOMComponent {
  // ...

  receive(nextElement) {
    var node = this.node;
    var prevElement = this.currentElement;
    var prevProps = prevElement.props;
    var nextProps = nextElement.props;    
    this.currentElement = nextElement;

    // Remove old attributes.
    Object.keys(prevProps).forEach(propName => {
      if (propName !== "children" && !nextProps.hasOwnProperty(propName)) {
        node.removeAttribute(propName);
      }
    });
    // Set next attributes.
    Object.keys(nextProps).forEach(propName => {
      if (propName !== "children") {
        node.setAttribute(propName, nextProps[propName]);
      }
    });

    // ...

接下來(lái)，主機(jī)組件需要更新它們的子元素。與復(fù)合組件不同的是，它們可能包含多個(gè)子元素。

在這個(gè)簡(jiǎn)化的例子中，我們使用一個(gè)內(nèi)部實(shí)例的數(shù)組并對(duì)其進(jìn)行迭代，是更新或替換內(nèi)部實(shí)例，這取決于接收到的type是否與之前的type匹配。
真正的調(diào)解器（reconciler）同時(shí)在帳戶中獲取元素的key并且追蹤變動(dòng)，除了插入與刪除，但是我們現(xiàn)在先忽略這一邏輯。

我們?cè)诹斜碇惺占疍OM操作，這樣我們就可以批量地執(zhí)行它們。

    // ...

    // // 這些是React元素（element）數(shù)組:
    var prevChildren = prevProps.children || [];
    if (!Array.isArray(prevChildren)) {
      prevChildren = [prevChildren];
    }
    var nextChildren = nextProps.children || [];
    if (!Array.isArray(nextChildren)) {
      nextChildren = [nextChildren];
    }
    // 這些是內(nèi)部實(shí)例(internal instances)數(shù)組:
    var prevRenderedChildren = this.renderedChildren;
    var nextRenderedChildren = [];

    // 當(dāng)我們遍歷children時(shí)，我們將向數(shù)組中添加操作。
    var operationQueue = [];

    // 注意：以下章節(jié)大大減化！
    // 它不處理reorders，空children，或者keys。
    // 它只是用來(lái)解釋整個(gè)流程，而不是具體的細(xì)節(jié)。

    for (var i = 0; i < nextChildren.length; i++) {
      // 嘗試為這個(gè)子級(jí)獲取現(xiàn)存內(nèi)部實(shí)例。
      var prevChild = prevRenderedChildren[i];

      // 如果在這個(gè)索引下沒(méi)有內(nèi)部實(shí)例,那說(shuō)明是一個(gè)child被添加了末尾。
      // 這時(shí)應(yīng)該去創(chuàng)建一個(gè)內(nèi)部實(shí)例，掛載它，并使用它的節(jié)點(diǎn)。
      if (!prevChild) {
        var nextChild = instantiateComponent(nextChildren[i]);
        var node = nextChild.mount();

        // 記錄一下我們將來(lái)需要append一個(gè)節(jié)點(diǎn)（node）
        operationQueue.push({type: "ADD", node});
        nextRenderedChildren.push(nextChild);
        continue;
      }

      // 如果它的元素類型匹配，我們只需要更新該實(shí)例即可  
      // 例如, 

可以更新為 // 但是不能被更新為 . var canUpdate = prevChildren[i].type === nextChildren[i].type; // 如果我們不能更新現(xiàn)有的實(shí)例，我們就必須卸載它。然后裝一個(gè)新的替代它。 if (!canUpdate) { var prevNode = prevChild.getHostNode(); prevChild.unmount(); var nextChild = instantiateComponent(nextChildren[i]); var nextNode = nextChild.mount(); // 記錄一下我們將來(lái)需要替換這些nodes operationQueue.push({type: "REPLACE", prevNode, nextNode}); nextRenderedChildren.push(nextChild); continue; } // 如果我們可以更新現(xiàn)存的內(nèi)部實(shí)例（internal instance）， // 我們僅僅把下一個(gè)元素傳入其receive即可，讓其receive函數(shù)處理它的更新即可 prevChild.receive(nextChildren[i]); nextRenderedChildren.push(prevChild); } // 最后，卸載（unmount）哪些不存在的children for (var j = nextChildren.length; j < prevChildren.length; j++) { var prevChild = prevRenderedChildren[j]; ? ? var node = prevChild.getHostNode(); prevChild.unmount(); // 記錄一下我們將來(lái)需要remove這些node operationQueue.push({type: "REMOVE", node}); } // Point the list of rendered children to the updated version. this.renderedChildren = nextRenderedChildren; // ...

作為最后一步，我們執(zhí)行DOM操作。還是那句話，真正的協(xié)調(diào)器（reconciler）代碼更復(fù)雜，因?yàn)樗€能處理移動(dòng)：

    // ...

    // 處理隊(duì)列里的operation。
    while (operationQueue.length > 0) {
      var operation = operationQueue.shift();
      switch (operation.type) {
      case "ADD":
        this.node.appendChild(operation.node);
        break;
      case "REPLACE":
        this.node.replaceChild(operation.nextNode, operation.prevNode);
        break;
      case "REMOVE":
        this.node.removeChild(operation.node);
        break;
      }
    }
  }
}

這是用來(lái)更新主機(jī)組件（host components）的。

頂級(jí)更新（Top-Level Updates）

現(xiàn)在 CompositeComponent 與 DOMComponent 都實(shí)現(xiàn)了 receive(nextElement) 方法,
我們現(xiàn)在可以改變頂級(jí) mountTree() 函數(shù)了，當(dāng)元素（element）的type相同時(shí)，我們可以使用receive了。

function mountTree(element, containerNode) {
  // Check for an existing tree
  if (containerNode.firstChild) {
    var prevNode = containerNode.firstChild;
    var prevRootComponent = prevNode._internalInstance;
    var prevElement = prevRootComponent.currentElement;

    // 如果可以，使用現(xiàn)存根組件
    if (prevElement.type === element.type) {
      prevRootComponent.receive(element);
      return;
    }

    // 否則，卸載現(xiàn)存樹(shù)
    unmountTree(containerNode);
  }

  // ...

}

現(xiàn)在調(diào)用 mountTree()兩次，同樣的類型不會(huì)先卸載再裝載了：

var rootEl = document.getElementById("root");

mountTree(, rootEl);
// 復(fù)用現(xiàn)存 DOM:
mountTree(, rootEl);

These are the basics of how React works internally.

我們遺漏的還有什么？

與真正的代碼庫(kù)相比，這個(gè)文檔被簡(jiǎn)化了。有一些重要的方面我們沒(méi)有提到：

組件可以渲染null，而且，協(xié)調(diào)器（reconciler）可以處理數(shù)組中的“空槽（empty slots）”并顯示輸出。

協(xié)調(diào)器（reconciler）可以從元素中讀取 key ，并且用它來(lái)建立在一個(gè)數(shù)組中內(nèi)部實(shí)例與元素的對(duì)應(yīng)關(guān)系。實(shí)際的 React 實(shí)現(xiàn)的大部分復(fù)雜性與此相關(guān)。

除了復(fù)合和主機(jī)內(nèi)部實(shí)例類之外，還存在用于“文本”和“空”組件的類。它們表示文本節(jié)點(diǎn)和通過(guò)渲染 null得到的“空槽”。

渲染器（Renderers）使用injection

將主機(jī)內(nèi)部類傳遞給協(xié)調(diào)器(reconciler)。例如，React DOM 告訴協(xié)調(diào)器使用 ReactDOMComponent 作為主機(jī)內(nèi)部實(shí)現(xiàn)實(shí)例。

更新子列表的邏輯被提取到一個(gè)名為 ReactMultiChild 的mixin中，它被主機(jī)內(nèi)部實(shí)例類實(shí)現(xiàn)在 React DOM和 React Native時(shí)都使用。

協(xié)調(diào)器也實(shí)現(xiàn)了在復(fù)合組件（composite components）中支持setState()。事件處理程序內(nèi)部的多個(gè)更新將被打包成一個(gè)單一的更新。

協(xié)調(diào)器（reconciler）還負(fù)責(zé)復(fù)合組件和主機(jī)節(jié)點(diǎn)的refs。

在DOM準(zhǔn)備好之后調(diào)用的生命周期鉤子，例如 componentDidMount() 和 componentDidUpdate()，收集到“回調(diào)隊(duì)列”，并在單個(gè)批處理中執(zhí)行。

React 將當(dāng)前更新的信息放入一個(gè)名為“事務(wù)”的內(nèi)部對(duì)象中。事務(wù)對(duì)于跟蹤掛起的生命周期鉤子的隊(duì)列、

為了warning而嵌套的當(dāng)前DOM（the current DOM nesting for the warnings）以及任何“全局”到特定的更新都是有用的。
事務(wù)還可以確保在更新后“清除所有內(nèi)容”。例如，由 React DOM提供的事務(wù)類在任何更新之后恢復(fù)input的選中與否。

直接查看代碼（Jumping into the Code）

在 ReactMount 中可以查看此教程中類似 mountTree() 和 unmountTree() 的代碼.

它負(fù)責(zé)裝載(mounting)和卸載（unmounting）頂級(jí)組件。
ReactNativeMount is its React Native analog.

ReactDOMComponent

在教程中與DOMComponent等同. 它實(shí)現(xiàn)了 React DOM渲染器（renderer）的主機(jī)組件類（host component class。
ReactNativeBaseComponent is its React Native analog.

ReactCompositeComponent

在教程中與 CompositeComponent 等同. 它處理調(diào)用用戶定義的組件并維護(hù)它們的狀態(tài)。

instantiateReactComponent
包含選擇正確的內(nèi)部實(shí)例類并運(yùn)行element的構(gòu)造函數(shù)。在本教程中，它與instantiateComponent()等同。

ReactReconciler

是一個(gè)具有 mountComponent(), receiveComponent(), 和 unmountComponent() 方法的封裝.
它調(diào)用內(nèi)部實(shí)例的底層實(shí)現(xiàn)，但也包含了所有內(nèi)部實(shí)例實(shí)現(xiàn)共享的代碼。

ReactChildReconciler

根據(jù)元素的 key ，實(shí)現(xiàn)了mounting、updating和unmounting的邏輯.

ReactMultiChild

獨(dú)立于渲染器的操作隊(duì)列，實(shí)現(xiàn)了處理child的插入、刪除和移動(dòng)

由于遺留的原因 mount(), receive(), and unmount() 被稱作 mountComponent(),

receiveComponent(), and unmountComponent() 但是他們卻接收elements

內(nèi)部實(shí)例的屬性以一個(gè)下劃線開(kāi)始, 例如， _currentElement. 在整個(gè)代碼庫(kù)中，它們被認(rèn)為是只讀的公共字段。

未來(lái)方向（Future Directions）

堆棧協(xié)調(diào)器具有固有的局限性, 如同步和無(wú)法中斷工作或分割成區(qū)塊。
我們正在實(shí)現(xiàn)一個(gè)新的協(xié)調(diào)器Fiber reconciler,
你可以在這里看它的具體思路
將來(lái)我們會(huì)用fiber協(xié)調(diào)器代替stack協(xié)調(diào)器（譯者注：其實(shí)現(xiàn)在react16已經(jīng)發(fā)布，在react16中fiber算法已經(jīng)取代了stack算法）

下一步（Next Steps）

閱讀next section以了解有關(guān)協(xié)調(diào)器的當(dāng)前實(shí)現(xiàn)的詳細(xì)信息。