React 作為一個(gè) UI 運(yùn)行時(shí)（一、宿主環(huán)境和渲染器）

騫諱護(hù) 發(fā)布于2019-08-23 15:14 / 1686人閱讀

摘要：我們稱這些結(jié)構(gòu)為，因?yàn)橥ǔＫ麄兪侵馑拗鳝h(huán)境的一部份就像和。宿主實(shí)例由節(jié)點(diǎn)構(gòu)成的我們稱為。甚至都可以稱作渲染器。這種模式適用于那些并不提供像的而是克隆雙親樹(shù)并始終替換掉頂級(jí)子樹(shù)的宿主環(huán)境。在宿主樹(shù)級(jí)別上的不可變性使得多線程變得更加容易。

很多教程把React介紹為一個(gè)UI框架。這很合理因?yàn)樗褪且粋€(gè)UI庫(kù)，這就是react標(biāo)語(yǔ)的意思。
這篇文章不會(huì)叫你任何關(guān)于建立用戶界面的知識(shí)，但是會(huì)幫助你更生層次的理解React編程模型。
這是一篇深入解析的文章，對(duì)初學(xué)者不太適合。在這篇文章我將通過(guò)第一準(zhǔn)則描述大部分的React編程，我將解釋react是如何工作的。

1 Host Tree

一些程序輸出數(shù)字，另一些程序輸出詩(shī)歌。不同的語(yǔ)言和他們的運(yùn)行時(shí)通常會(huì)對(duì)特定的實(shí)例進(jìn)行優(yōu)化，React也不例外。

React會(huì)生成一顆不斷變化的樹(shù)結(jié)構(gòu)。它可能是Dom樹(shù)，ios層級(jí)，關(guān)于PDF的原語(yǔ)樹(shù)，或者是JSON的對(duì)象。通常我們希望用它們來(lái)生成UI界面。
我們稱這些結(jié)構(gòu)為“host tree”，因?yàn)橥ǔＫ麄兪荝eact之外宿主環(huán)境的一部份——就像Dom和iOS。host tree 通常擁有自己的命令式的API。React就是它上面的一層。
所以React的作用是什么呢？抽象的說(shuō)，它能幫助你在編寫程序時(shí)可預(yù)測(cè)的操作復(fù)雜的Host tree，并且對(duì)像交互，網(wǎng)絡(luò)響應(yīng)，定時(shí)器等等這樣的外部事件作出反應(yīng)。

當(dāng)專門的工具通過(guò)特定的約束獲取收益，他就比一般的工作優(yōu)秀。React通過(guò)下面的兩項(xiàng)原則實(shí)現(xiàn)：

穩(wěn)定：host tree相對(duì)來(lái)說(shuō)比較穩(wěn)定，大部分的更新不會(huì)改變整個(gè)結(jié)構(gòu)。。如果一款app經(jīng)常用完全不同的組合改變交互元素，它會(huì)比較難用的。按鈕去哪了呢？為什么我的屏幕會(huì)跳動(dòng)？

有規(guī)律的： Host tree 可以將拆分成不同的UI組件但表現(xiàn)一致，而不是不同的形狀。

這些原則恰好適用于大多數(shù) UI 。然而，當(dāng)輸出沒(méi)有穩(wěn)定的“模式”時(shí) React 并不適用。例如，React 也許可以幫助你編寫一個(gè) Twitter 客戶端，但對(duì)于一個(gè) 3D 管道屏幕保護(hù)程序并不會(huì)起太大作用。

2.Host Instances（宿主實(shí)例）

由節(jié)點(diǎn)構(gòu)成的host tree 我們稱為Host Instances。
在Dom環(huán)境中，宿主實(shí)例就是一般的DOM節(jié)點(diǎn)——就像你使用document.createElement("div")方法時(shí)所得到的對(duì)象。在 iOS 中，宿主實(shí)例可以是從 JavaScript 到原生視圖唯一標(biāo)識(shí)的值。
宿主實(shí)例有它們的屬性，他們也有可能將其他的宿主實(shí)例作為子項(xiàng)。
一般會(huì)有API操作宿主的實(shí)例。。比如Dom提供了像appendChild， removeChild， setAttribute等等的API。在React中一般都不使用這些API，因?yàn)槎加蠷eact來(lái)做。

3.render

渲染器(render)教會(huì) React 如何與特定的宿主環(huán)境通信以及如何管理它的宿主實(shí)例。React DOM、React Native 甚至 Ink 都可以稱作 React 渲染器。你也可以創(chuàng)建自己的 React 渲染器。

React 渲染器能以下面兩種模式之一進(jìn)行工作。

絕大多數(shù)渲染器都被用作“可變”模式。這種模式正是 DOM 的工作方式：我們可以創(chuàng)建一個(gè)節(jié)點(diǎn)，設(shè)置它的屬性，在之后往里面增加或者刪除子節(jié)點(diǎn)。宿主實(shí)例是完全可變的。

但 React 也能以”不變“模式工作。這種模式適用于那些并不提供像 appendChild 的 API 而是克隆雙親樹(shù)并始終替換掉頂級(jí)子樹(shù)的宿主環(huán)境。在宿主樹(shù)級(jí)別上的不可變性使得多線程變得更加容易。React Fabric 就利用了這一模式。

作為 React 的使用者，你永遠(yuǎn)不需要考慮這些模式。我只想強(qiáng)調(diào) React 不僅僅只是從一種模式轉(zhuǎn)換到另一種模式的適配器。它的用處在于以一種更好的方式操控宿主實(shí)例而不用在意那些低級(jí)視圖 API 范例。