Host Environments & Reconciler

前一篇提到了React是為了解決DOM的問題，但其實不僅止於此，React除了網頁之外也可以用在ios、android手機，甚至windows桌機上。之所以可以這樣是因為React把它內部的實作拆成了兩部分：Host Environments以及Reconciler。

綱舉目張👀

Host Environments
Reconciler
ReactDOM
Host Config
Conclusion
Reference

Host Environments

React之所以獨立Host Environments和Reconciler是為了達到跨平台的開發，讓React實作UI的方式可以套用到各個平台上，即“learn once, write anywhere.”

Host Environments就是React運行的環境，也有另一種說法是Host Components。如果React運行在Web上，那麼Host Environments就是div, span, img, etc 這些網頁上的DOM。如果是透過React Native運行在手機上那麼Host Environments就是View, Text, Image, etc.

Reconciler

不同於Host Environments會根據運行環境不同而有所差異，Reconciler就是跨平台共享的概念和邏輯，幾乎所有React的東西都包含在其中：function components, class components, props, state, effects, lifecycles, etc.

React有發佈一個實驗性質的套件react-reconciler讓有興趣的人可以玩玩看！

ReactDOM

平常在寫React的時候並不會感覺Host Environments和Reconciler是獨立開來的東西，那是因為有另一個套件ReactDOM幫我們將兩者連接了起來。

ReactDOM裡有個ReactDOMHostConfig的file，裡面就記錄了當React要改變UI時，實際上的DOM該如何變化。

在React裡，所有的畫面會呈現一個樹狀的結構，在此先簡稱為View Tree。Reconciler會根據props或state的變化去渲染或更新畫面，此時會有兩個階段：render phase和commit phase。在render phase會透過Reconciliation找出需要更新的component並將新的View Tree準備好。然後進入commit phase的時候才實際根據View Tree的樣子去更新畫面。而更新畫面的方式就寫在Host Config裡了。

Host Config

來段簡易版的Host Config:

const hostConfig = {
 supportsMutation: true,
 createInstance: (type, props, ...rest) => {
     let el = document.createElement(type);
     if (props.className) el.className = props.className;
     if (props.src) el.src = props.src;
     return el;
 },
 createTextInstance: (text, ...rest) => {
     return document.createTextNode(text);
 },
 appendChildToContainer: (container, child) => {
     container.appendChild(child);
 },
 appendInitialChild: (parent, child) => {
     parent.appendChild(child);
 },
 appendChild: (parent, child) => {
     parent.appendChild(child);
 }
};

上面的程式是以DOM去實現的，當React要在commit phase更新畫面時就會使用到createInstance, createTextInstance, appendChildToContainer, etc.
又因為Host Environments是Web所以這些function就是由DOM的api去實現的，透過這樣的方式Host Environments就可以和Reconciler連接起來了。要運行在不同的平台上只要更改Host Config的實作。

Host Config of React Native
Host Config of React DOM
Host Config of React ART