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

Conclusion

透過Host Config連結Host Environments和Reconciler,讓我們可以“learn once, write anywhere.”!

Reference

By the way

如果你看到了這裡,就順便讓我置入行銷一下 Podcast 節目【BitWise 一點智慧】吧!
【BitWise 一點智慧】主要是以輕鬆的角度,跟大家聊聊軟體開發、 設計、學習、以及一些生活分享。

用Apple收聽
用Spotify收聽
用Google收聽
官方網站

#React #Reconciler #reactDOM #Host Environments
A bit about React
學習React也有一小段時間了,不論使用上或是他設計的哲學都滿喜歡的,在這留個學習紀錄也做更深入的探討~






Related Posts

製作 Custom React renderer - 用 React 寫 ppt

製作 Custom React renderer - 用 React 寫 ppt

JavaScript 設計模式:單體模式 ( Singleton )

JavaScript 設計模式:單體模式 ( Singleton )

只是看看 JSON 檔案格式

只是看看 JSON 檔案格式

與 CSS Grid 的第一次接觸

與 CSS Grid 的第一次接觸

Android 時間格式轉換筆記

Android 時間格式轉換筆記

【單元測試的藝術】Chap 6: 深入了解隔離框架

【單元測試的藝術】Chap 6: 深入了解隔離框架



Comments