從代碼實(shí)踐潛入React內(nèi)部，深入diff

本節(jié)是 stack reconciler程序的實(shí)現(xiàn)說(shuō)明的集合。

ReactDOM.render(, rootEl);

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

由子組件生成的DOM節(jié)點(diǎn)將附加到父DOM節(jié)點(diǎn)，并且將遞歸地組裝完整的DOM結(jié)構(gòu)。

注意: 調(diào)解器本身與DOM無(wú)關(guān)。mounting(安裝)的確切結(jié)果（有時(shí)在源代碼中稱為“mount image”）取決于渲染器，可以是DOM節(jié)點(diǎn)（React DOM），字符串（React DOM Server）或表示原生視圖（React Native）。

如果我們要擴(kuò)展代碼來(lái)處理計(jì)算機(jī)元素，它將如下所示：

function isClass(type) {
  // 繼承自 React.Component 類有一個(gè)標(biāo)簽 isReactComponent
  return (
    Boolean(type.prototype) &&
    Boolean(type.prototype.isReactComponent)
  );
}

// 這個(gè)函數(shù)只處理復(fù)合的元素
// 比如像是, 這些，但不是
這些
function mountComposite(element) {
  var type = element.type;
  var props = element.props;

  var renderedElement;
  if (isClass(type)) {
    // 組件是類的情況，就去實(shí)例化他
    var publicInstance = new type(props);
    // 設(shè)置props
    publicInstance.props = props;
    // 必要的時(shí)候調(diào)用生命周期方法
    if (publicInstance.componentWillMount) {
      publicInstance.componentWillMount();
    }
    renderedElement = publicInstance.render();
  } else if (typeof type === "function") {
    // 組件是個(gè)函數(shù)
    renderedElement = type(props);
  }

  // 這是遞歸的
  // 但當(dāng)元素是宿主（例如
）而不是復(fù)合（例如）時(shí)，我們將最終完成遞歸：
  return mount(renderedElement);
}

// 這個(gè)函數(shù)僅僅處理計(jì)算機(jī)元素
// 例如它處理
和
這些，但不處理
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);

    
  // 這段代碼不應(yīng)該在協(xié)調(diào)器中。
  // 不同的渲染器可能對(duì)節(jié)點(diǎn)進(jìn)行不同的初始化。
  // 例如，React Native將創(chuàng)建iOS或Android視圖。
  var node = document.createElement(type);
  Object.keys(props).forEach(propName => {
    if (propName !== "children") {
      node.setAttribute(propName, props[propName]);
    }
  });

  // 安裝子元素
  children.forEach(childElement => {
    // 子元素可能是計(jì)算機(jī)元素(比如
)，也有可能是一個(gè)合成組件(比如)
    // 我們都會(huì)遞歸掛載安裝
    var childNode = mount(childElement);

    // 下面這個(gè)也是一個(gè)特定于平臺(tái)的
    // 它會(huì)根據(jù)不同的渲染器來(lái)處理，這里只是一個(gè)假設(shè)他是一個(gè)dom渲染器
    node.appendChild(childNode);
  });

  // 返回作為安裝結(jié)果的DOM節(jié)點(diǎn)
  // 這也是遞歸的結(jié)束的地方
  return node;
}

function mount(element) {
  var type = element.type;
  if (typeof type === "function") {
    // 用戶定義的組件(合成的組件)
    return mountComposite(element);
  } else if (typeof type === "string") {
    // 計(jì)算機(jī)組件(例如: 
)
    return mountHost(element);
  }
}

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

這是有效的，但仍遠(yuǎn)未達(dá)到協(xié)調(diào)者的實(shí)際運(yùn)行方式。關(guān)鍵的缺失部分是對(duì)更新的支持。

react的關(guān)鍵特點(diǎn)是你可以重新渲染所有東西，它不會(huì)重新創(chuàng)建DOM或重置狀態(tài)。

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

但是，我們上面的實(shí)現(xiàn)只知道如何掛載初始樹。它無(wú)法對(duì)其執(zhí)行更新，因?yàn)樗淮鎯?chǔ)所有必需的信息，例如所有publicInstances，或哪些DOM節(jié)點(diǎn)對(duì)應(yīng)于哪些組件。

堆棧協(xié)調(diào)器代碼庫(kù)通過(guò)使mount函數(shù)成為一個(gè)類上面的方法來(lái)解決這個(gè)問(wèn)題。但是這種方法存在一些缺點(diǎn)，我們?cè)谡谶M(jìn)行的協(xié)調(diào)重寫任務(wù)中正朝著相反的方向去發(fā)展(筆者：目前fiber已經(jīng)出來(lái)了)。不過(guò) 這就是它現(xiàn)在的運(yùn)作方式。

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

兩個(gè)類都有一個(gè)接受元素的構(gòu)造函數(shù)，以及一個(gè)返回已安裝節(jié)點(diǎn)的mount()方法。我們將用實(shí)例化類的工廠替換頂級(jí)mount()函數(shù)：

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

首先，讓我們考慮下CompositeComponent的實(shí)現(xiàn):

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)) {
      // Component class
      publicInstance = new type(props);
      // Set the props
      publicInstance.props = props;
      // Call the lifecycle if necessary
      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;

    // 根據(jù)元素實(shí)例化子內(nèi)部實(shí)例
    // 他將是DOMComponent,例如
, 

    // 或者是CompositeComponent,例如，
    var renderedComponent = instantiateComponent(renderedElement);
    this.renderedComponent = renderedComponent;

    // Mount the rendered output
    return renderedComponent.mount();
  }
}

這與我們之前的mountComposite()實(shí)現(xiàn)沒(méi)什么不同，但現(xiàn)在我們可以存儲(chǔ)一些信息，例如this.currentElement,this.renderedComponent和this.publicInstance,在更新期間使用。

請(qǐng)注意，CompositeComponent的實(shí)例與用戶提供的element.type的實(shí)例不同。CompositeComponent是我們的協(xié)調(diào)程序的實(shí)現(xiàn)細(xì)節(jié)，永遠(yuǎn)不會(huì)向用戶公開。用戶定義的類是我們從element.type讀取的，CompositeComponent會(huì)創(chuàng)建這個(gè)類的實(shí)例。

為避免混淆，我們將CompositeComponent和DOMComponent的實(shí)例叫做“內(nèi)部實(shí)例”。 它們存在，因此我們可以將一些長(zhǎng)期存在的數(shù)據(jù)與它們相關(guān)聯(lián)。只有渲染器和調(diào)解器知道它們存在。

相反，我們將用戶定義類的實(shí)例稱為“公共實(shí)例(public instance)”。 公共實(shí)例是你在render()和組件其他的方法中看到的this.

至于mountHost()方法，重構(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]);
      }
    });

    // 創(chuàng)建并保存包含的子元素
    // 這些子元素，每個(gè)都可以是DOMComponent或CompositeComponent
    // 這些匹配是依賴于元素類型的返回值(string或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));

    // DOM節(jié)點(diǎn)作為mount的節(jié)點(diǎn)返回
    return node;
  }
}

與上面的相比，mountHost()重構(gòu)之后的主要區(qū)別是現(xiàn)在將this.node和this.renderedChildren與內(nèi)部DOM組件實(shí)例相關(guān)聯(lián)。我們會(huì)用他來(lái)用于在后面做非破壞性的更新。

因此，每個(gè)內(nèi)部實(shí)例（復(fù)合或主機(jī)）現(xiàn)在都指向其子級(jí)內(nèi)部實(shí)例。為了幫助可視化，如果函數(shù)組件呈現(xiàn)類組件，而Button類呈現(xiàn)

，則內(nèi)部實(shí)例樹將如下所示：

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

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

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

在DOM中，你只能看到

。但是，內(nèi)部實(shí)例樹包含復(fù)合和主機(jī)內(nèi)部實(shí)例。

復(fù)合內(nèi)部實(shí)例需要存儲(chǔ)：

當(dāng)前元素

公共實(shí)例，如果當(dāng)前元素類型是個(gè)類

單個(gè)呈現(xiàn)的內(nèi)部實(shí)例。它可以是DOMComponent或CompositeComponent。

計(jì)算機(jī)內(nèi)部實(shí)例需要存儲(chǔ)：

當(dāng)前元素

DOM節(jié)點(diǎn)

所有子級(jí)的內(nèi)部實(shí)例，這些子級(jí)中的每一個(gè)都可以是DOMComponent或CompositeComponent。

如果你正在努力想象如何在更復(fù)雜的應(yīng)用程序中構(gòu)建內(nèi)部實(shí)例樹，React DevTools可以給你一個(gè)近似的結(jié)果，因?yàn)樗伙@灰色的計(jì)算機(jī)實(shí)例，以及帶紫色的復(fù)合實(shí)例：

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

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

  // 掛載頂層的組件到容器
  var node = rootComponent.mount();
  containerNode.appendChild(node);

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

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

卸載

既然我們有內(nèi)部實(shí)例來(lái)保存它們的子節(jié)點(diǎn)和DOM節(jié)點(diǎn)，那么我們就可以實(shí)現(xiàn)卸載。對(duì)于復(fù)合組件，卸載會(huì)調(diào)用生命周期方法并進(jìn)行遞歸。

class CompositeComponent {

  // ...

  unmount() {
    // 必要的時(shí)候調(diào)用生命周期方法
    var publicInstance = this.publicInstance;
    if (publicInstance) {
      if (publicInstance.componentWillUnmount) {
        publicInstance.componentWillUnmount();
      }
    }

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

對(duì)于DOMComponent,卸載會(huì)告訴每個(gè)子節(jié)點(diǎn)進(jìn)行卸載:

class DOMComponent {

  // ...

  unmount() {
    // 卸載所有的子級(jí)
    var renderedChildren = this.renderedChildren;
    renderedChildren.forEach(child => child.unmount());
  }
}

實(shí)際上，卸載DOM組件也會(huì)刪除事件偵聽器并清除一些緩存，但我們將跳過(guò)這些細(xì)節(jié)。

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

function unmountTree(containerNode) {
  // 從DOM節(jié)點(diǎn)讀取內(nèi)部實(shí)例
  // (目前這個(gè)不會(huì)正常工作， 我們將需要改變mountTree()方法去存儲(chǔ))
  var node = containerNode.firstChild;
  var rootComponent = node._internalInstance;

  // 清除容器并且卸載樹
  rootComponent.unmount();
  containerNode.innerHTML = "";
}

為了讓他工作，我們需要從DOM節(jié)點(diǎn)讀取內(nèi)部根實(shí)例。我們將修改mountTree()以將_internalInstance屬性添加到DOM根節(jié)點(diǎn)。我們還將讓mountTree()去銷毀任何現(xiàn)有樹，以便可以多次調(diào)用它：

function mountTree(element, containerNode) {
  // 銷毀存在的樹
  if (containerNode.firstChild) {
    unmountTree(containerNode);
  }

  // 創(chuàng)建頂層的內(nèi)部實(shí)例
  var rootComponent = instantiateComponent(element);

  // 掛載頂層的組件到容器
  var node = rootComponent.mount();
  containerNode.appendChild(node);

  // 保存內(nèi)部實(shí)例的引用
  node._internalInstance = rootComponent;

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

現(xiàn)在，重復(fù)運(yùn)行unmountTree()或運(yùn)行mountTree()，刪除舊樹并在組件上運(yùn)行componentWillUnmount()生命周期方法。

更新

在上一節(jié)中，我們實(shí)現(xiàn)了卸載。但是，如果每個(gè)prop更改導(dǎo)致卸載并安裝整個(gè)樹，則React就會(huì)顯得不是很好用了。協(xié)調(diào)程序的目標(biāo)是盡可能重用現(xiàn)有實(shí)例來(lái)保留DOM和狀態(tài)：

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

mountTree(, rootEl);
// 應(yīng)該重用存在的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) {
    // ...
  }
}

它的任務(wù)是盡一切可能使組件（及其任何子組件）與nextElement提供的描述保持同步。

這是經(jīng)常被描述為“虛擬DOM區(qū)別”的部分，盡管真正發(fā)生的是我們遞歸地遍歷內(nèi)部樹并讓每個(gè)內(nèi)部實(shí)例接收更新。

更新復(fù)合組件

當(dāng)復(fù)合組件接收新元素時(shí)，我們運(yùn)行componentWillUpdate()生命周期方法。

然后我們使用新的props重新渲染組件，并獲取下一個(gè)渲染元素：

class CompositeComponent {

  // ...

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

    // 更新自有的元素
    this.currentElement = nextElement;
    var type = nextElement.type;
    var nextProps = nextElement.props;

    // 弄清楚下一個(gè)render()的輸出是什么
    var nextRenderedElement;
    if (isClass(type)) {
      // 類組件
      // 必要的時(shí)候調(diào)用生命周期
      if (publicInstance.componentWillUpdate) {
        publicInstance.componentWillUpdate(nextProps);
      }
      // 更新props
      publicInstance.props = nextProps;
      // Re-render
      nextRenderedElement = publicInstance.render();
    } else if (typeof type === "function") {
      // 函數(shù)式組件
      nextRenderedElement = type(nextProps);
    }

    // ...

接下來(lái)，我們可以查看渲染元素的type。如果自上次渲染后type未更改，則下面的組件也可以在之前的基礎(chǔ)上更新。

例如，如果第一次返回

，第二次返回，我們可以告訴相應(yīng)的內(nèi)部實(shí)例receive()下一個(gè)元素：

    // ...

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

    // ...

但是，如果下一個(gè)渲染元素的類型與先前渲染的元素不同，我們無(wú)法更新內(nèi)部實(shí)例。

不可能變成。

相反，我們必須卸載現(xiàn)有的內(nèi)部實(shí)例并掛載與呈現(xiàn)的元素類型相對(duì)應(yīng)的新實(shí)例。例如，當(dāng)先前呈現(xiàn)

的組件呈現(xiàn)時(shí)，會(huì)發(fā)生這種情況：

    // ...

    // 如果我們到達(dá)了這一點(diǎn)，那么我們就需要卸載之前掛載的組件
    // 掛載新的一個(gè)，并且交換他們的節(jié)點(diǎn)

    // 找到舊的節(jié)點(diǎn)，因?yàn)槲覀冃枰ヌ鎿Q他
    var prevNode = prevRenderedComponent.getHostNode();

    // 卸載舊的子級(jí)并且掛載新的子級(jí)
    prevRenderedComponent.unmount();
    var nextRenderedComponent = instantiateComponent(nextRenderedElement);
    var nextNode = nextRenderedComponent.mount();

    // 替換對(duì)子級(jí)的引用
    this.renderedComponent = nextRenderedComponent;

    // 新的節(jié)點(diǎn)替換舊的
    // 記住：下面的代碼是特定于平臺(tái)的，理想情況下是在CompositeComponent之外的
    prevNode.parentNode.replaceChild(nextNode, prevNode);
  }
}

總而言之，當(dāng)復(fù)合組件接收到新元素時(shí)，它可以將更新委托給其呈現(xiàn)的內(nèi)部實(shí)例，或者卸載它并在其位置安裝新的實(shí)例。

在另一個(gè)條件下，組件將重新安裝而不是接收元素，即元素的key已更改。我們不討論本文檔中的key處理，因?yàn)樗鼮樵揪秃軓?fù)雜的教程增加了更多的復(fù)雜性。

請(qǐng)注意，我們需要將一個(gè)名為getHostNode()的方法添加到內(nèi)部實(shí)例協(xié)定中，以便可以在更新期間找到特定于平臺(tái)的節(jié)點(diǎn)并替換它。它的實(shí)現(xiàn)對(duì)于兩個(gè)類都很簡(jiǎn)單：

class CompositeComponent {
  // ...

  getHostNode() {
    // 請(qǐng)求渲染的組件提供他
    // 這將向下遞歸復(fù)合組件
    return this.renderedComponent.getHostNode();
  }
}

class DOMComponent {
  // ...

  getHostNode() {
    return this.node;
  }  
}

更換計(jì)算機(jī)組件

計(jì)算機(jī)組件實(shí)現(xiàn)，例如DOMComponent, 以不同方式更新。當(dāng)他們收到元素時(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;

    // 移除舊的屬性
    Object.keys(prevProps).forEach(propName => {
      if (propName !== "children" && !nextProps.hasOwnProperty(propName)) {
        node.removeAttribute(propName);
      }
    });
    // 設(shè)置接下來(lái)的屬性
    Object.keys(nextProps).forEach(propName => {
      if (propName !== "children") {
        node.setAttribute(propName, nextProps[propName]);
      }
    });

    // ...

然后，計(jì)算機(jī)組件需要更新他們的子組件。與復(fù)合組件不同，它們可能包含多個(gè)子組件。

在這個(gè)簡(jiǎn)化的示例中，我們使用內(nèi)部實(shí)例數(shù)組并對(duì)其進(jìn)行迭代，根據(jù)接收的類型是否與之前的類型匹配來(lái)更新或替換內(nèi)部實(shí)例。除了插入和刪除之外，真正的協(xié)調(diào)程序還會(huì)使用元素的鍵跟蹤移動(dòng)，但我們將省略此邏輯。

我們?cè)诹斜碇惺占蛹?jí)的DOM操作，以便批量執(zhí)行它們：

    // ...

    // 這個(gè)是React elements數(shù)組
    var prevChildren = prevProps.children || [];
    if (!Array.isArray(prevChildren)) {
      prevChildren = [prevChildren];
    }
    var nextChildren = nextProps.children || [];
    if (!Array.isArray(nextChildren)) {
      nextChildren = [nextChildren];
    }
    // 這是內(nèi)部實(shí)例的數(shù)組:
    var prevRenderedChildren = this.renderedChildren;
    var nextRenderedChildren = [];

    // 當(dāng)我們迭代子級(jí)的時(shí)候，我們將會(huì)添加操作到數(shù)組
    var operationQueue = [];

    //注意：下面的部分非常簡(jiǎn)單！
    //它的存在只是為了說(shuō)明整個(gè)流程，而不是細(xì)節(jié)。

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

      // 如果這個(gè)索引下不存在內(nèi)部實(shí)例，那就把子級(jí)被追加到后面。
      // 創(chuàng)建一個(gè)新的內(nèi)部實(shí)例，掛載他并使用他的節(jié)點(diǎn)
      if (!prevChild) {
        var nextChild = instantiateComponent(nextChildren[i]);
        var node = nextChild.mount();

        // 記錄我們需要追加的節(jié)點(diǎn)
        operationQueue.push({type: "ADD", node});
        nextRenderedChildren.push(nextChild);
        continue;
      }

      // 我們可以只更新元素類型匹配的實(shí)例(下面是元素類型相同)
      // 例如 

可以被更新成 // 但是不可以更新成(即元素類型不匹配) var canUpdate = prevChildren[i].type === nextChildren[i].type; // 如果不能更新這個(gè)存在的實(shí)例，那么我們必須移除他 // 并且掛載一個(gè)新的去代替他 if (!canUpdate) { var prevNode = prevChild.getHostNode(); prevChild.unmount(); var nextChild = instantiateComponent(nextChildren[i]); var nextNode = nextChild.mount(); // 記錄我們需要交換的節(jié)點(diǎn) operationQueue.push({type: "REPLACE", prevNode, nextNode}); nextRenderedChildren.push(nextChild); continue; } // 如果我們可以更新一個(gè)存在的內(nèi)部實(shí)例 // 只需要讓他接收下一個(gè)元素并且處理他自己的更新 prevChild.receive(nextChildren[i]); nextRenderedChildren.push(prevChild); } // 最后卸載不存在的元素的子級(jí) for (var j = nextChildren.length; j < prevChildren.length; j++) { var prevChild = prevRenderedChildren[j]; var node = prevChild.getHostNode(); prevChild.unmount(); // 記錄我們需要移除的節(jié)點(diǎn) operationQueue.push({type: "REMOVE", node}); } // 將渲染的子級(jí)列表指到更新的版本里 this.renderedChildren = nextRenderedChildren; // ...

作為最后一步，我們執(zhí)行DOM操作。同樣，真正的協(xié)調(diào)代碼更復(fù)雜，因?yàn)樗蔡幚硪苿?dòng)：

    // ...

    // Process the operation queue.
    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;
      }
    }
  }
}

這就是更新計(jì)算機(jī)組件(DOMComponent)

頂層更新

現(xiàn)在CompositeComponent和DOMComponent都實(shí)現(xiàn)了receive(nextElement)方法，我們可以更改頂級(jí)mountTree()函數(shù)，以便在元素類型與上次相同時(shí)使用它：

function mountTree(element, containerNode) {
  // 檢查存在的樹
  if (containerNode.firstChild) {
    var prevNode = containerNode.firstChild;
    var prevRootComponent = prevNode._internalInstance;
    var prevElement = prevRootComponent.currentElement;

    // 如果我們可以，復(fù)用存在的根組件
    if (prevElement.type === element.type) {
      prevRootComponent.receive(element);
      return;
    }

    // 其他的情況卸載存在的樹
    unmountTree(containerNode);
  }

  // ...

}

現(xiàn)在以相同的類型調(diào)用mountTree()兩次，不會(huì)有破壞性的更新了:

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

mountTree(, rootEl);
// Reuses the existing DOM:
mountTree(, rootEl);

這些是React內(nèi)部工作原理的基礎(chǔ)知識(shí)。

我們遺漏了什么

與真實(shí)代碼庫(kù)相比，本文檔得到了簡(jiǎn)化。我們沒(méi)有解決幾個(gè)重要方面：

組件可以呈現(xiàn)null，并且協(xié)調(diào)程序可以處理數(shù)組中的“空”并呈現(xiàn)輸出。

協(xié)調(diào)程序還從元素中讀取key，并使用它來(lái)確定哪個(gè)內(nèi)部實(shí)例對(duì)應(yīng)于數(shù)組中的哪個(gè)元素。實(shí)際React實(shí)現(xiàn)中的大部分復(fù)雜性與此相關(guān)。

除了復(fù)合和計(jì)算機(jī)內(nèi)部實(shí)例類之外，還有“text”和“empty”組件的類。它們代表文本節(jié)點(diǎn)和通過(guò)呈現(xiàn)null獲得的“空槽”。

渲染器使用注入將計(jì)算機(jī)內(nèi)部類傳遞給協(xié)調(diào)程序。例如，React DOM告訴協(xié)調(diào)程序使用ReactDOMComponent作為計(jì)算機(jī)內(nèi)部實(shí)例實(shí)現(xiàn)。

更新子項(xiàng)列表的邏輯被提取到名為ReactMultiChild的mixin中，它由React DOM和React Native中的計(jì)算機(jī)內(nèi)部實(shí)例類實(shí)現(xiàn)使用。

協(xié)調(diào)程序還在復(fù)合組件中實(shí)現(xiàn)對(duì)setState()的支持。事件處理程序內(nèi)的多個(gè)更新將被批處理為單個(gè)更新。

協(xié)調(diào)器還負(fù)責(zé)將引用附加和分離到復(fù)合組件和計(jì)算機(jī)節(jié)點(diǎn)。

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

React將有關(guān)當(dāng)前更新的信息放入名為“transaction”的內(nèi)部對(duì)象中。transaction對(duì)于跟蹤待處理生命周期方法的隊(duì)列、警告當(dāng)前DOM的嵌套以及特定更新的“全局”其他任何內(nèi)容都很有用。事務(wù)還確保React在更新后“清理所有內(nèi)容”。例如，React DOM提供的事務(wù)類在任何更新后恢復(fù)輸入選擇。

進(jìn)入代碼

ReactMount是本教程中的mountTree()和unmountTree()之類的代碼。他負(fù)責(zé)安裝和卸載頂層的組件。ReactNativeMount是React Native的模擬。

ReactDOMComponent等同于本教程中的DOMComponent。它實(shí)現(xiàn)了React DOM渲染器的計(jì)算機(jī)組件類。ReactNativeBaseComponent是對(duì)React Native的模擬。

ReactCompositeComponent是等同于本教程中的CompositeComponent。他處理用戶自定義的組件并維護(hù)狀態(tài)。

instantiateReactComponent用于選擇要為元素構(gòu)造的內(nèi)部實(shí)例類。它等同于本教程中的instantiateComponent()。

ReactReconciler里是mountComponent(),receiveComponent(), unmountComponent()方法。它調(diào)用內(nèi)部實(shí)例上的底層實(shí)現(xiàn)，但也包括一些由所有內(nèi)部實(shí)例實(shí)現(xiàn)共享的代碼。

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

由于遺留原因，mount()，receive()和unmount()在React代碼庫(kù)中實(shí)際上稱為mountComponent()，receiveComponent()和unmountComponent()，但它們接收元素。

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

未來(lái)的發(fā)展方向

堆棧協(xié)調(diào)器(stack reconciler)具有固有的局限性，例如同步并且無(wú)法中斷工作或?qū)⑵洳鸱譃閴K。新的 Fiber reconciler正在進(jìn)行中(筆：當(dāng)然，大家都知道，目前已經(jīng)完成了)，他們有完全不同的架構(gòu)。在未來(lái)，我們打算用它替換堆棧協(xié)調(diào)程序，但目前它遠(yuǎn)非功能校驗(yàn)。

下一步

閱讀下一節(jié)，了解我們用于React開發(fā)的指導(dǎo)原則。

原文：   Implementation Notes
原譯文： react的實(shí)現(xiàn)記錄