React 作為一個 UI 執行時（一、Host Tree）

摘要： 很多教程把React介紹為一個UI框架。這很合理因為它就是一個UI庫，這就是react標語的意思。 這篇文章不會叫你任何關於建立使用者介面的知識，但是會幫助你更生層次的理解React程式設計模型。 這是一篇深入解析的文章，對初學者不太適合。在這篇文章我將通過第一準則描述大...

很多教程把React介紹為一個UI框架。這很合理因為它就是一個UI庫，這就是react標語的意思。

這篇文章不會叫你任何關於建立使用者介面的知識，但是會幫助你更生層次的理解React程式設計模型。

這是一篇深入解析的文章，對初學者不太適合。在這篇文章我將通過第一準則描述大部分的React程式設計，我將解釋react是如何工作的。

1 Host Tree

一些程式輸出數字，另一些程式輸出詩歌。不同的語言和他們的執行時通常會對特定的例項進行優化，React也不例外。

React會生成一顆不斷變化的樹結構。它可能是Dom樹，ios層級，關於PDF的原語樹，或者是JSON的物件。通常我們希望用它們來生成UI介面。

我們稱這些結構為“host tree”， 因為通常他們是React之外宿主環境的一部份——就像Dom和iOS。host tree 通常擁有自己的命令式的API。

React就是它上面的一層。

所以React的作用是什麼呢？抽象的說，它能幫助你在編寫程式時可預測的操作複雜的Host tree，並且對像互動，網路響應，定時器等等這樣的外部事件作出反應。

當專門的工具通過特定的約束獲取收益，他就比一般的工作優秀。React通過下面的兩項原則實現：

穩定：host tree相對來說比較穩定，大部分的更新不會改變整個結構。。如果一款app經常用完全不同的組合改變互動元素，它會比較難用的。按鈕去哪了呢？為什麼我的螢幕會跳動？

有規律的： Host tree 可以將拆分成不同的UI元件但表現一致，而不是不同的形狀。

這些原則恰好適用於大多數 UI 。 然而，當輸出沒有穩定的“模式”時 React 並不適用。例如，React 也許可以幫助你編寫一個 Twitter 客戶端，但對於一個 3D 管道螢幕保護程式 並不會起太大作用。