React 作為一個 UI 運行時（一、宿主環境和渲染器）

騫諱護發布于2019-08-23 15:14 / 1693人閱讀

摘要：我們稱這些結構為，因為通常他們是之外宿主環境的一部份就像和。宿主實例由節點構成的我們稱為。甚至都可以稱作渲染器。這種模式適用于那些并不提供像的而是克隆雙親樹并始終替換掉頂級子樹的宿主環境。在宿主樹級別上的不可變性使得多線程變得更加容易。

很多教程把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 管道屏幕保護程序并不會起太大作用。

2.Host Instances（宿主實例）

由節點構成的host tree 我們稱為Host Instances。
在Dom環境中，宿主實例就是一般的DOM節點——就像你使用document.createElement("div")方法時所得到的對象。在 iOS 中，宿主實例可以是從 JavaScript 到原生視圖唯一標識的值。
宿主實例有它們的屬性，他們也有可能將其他的宿主實例作為子項。
一般會有API操作宿主的實例。。比如Dom提供了像appendChild， removeChild， setAttribute等等的API。在React中一般都不使用這些API，因為都有React來做。

3.render

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

React 渲染器能以下面兩種模式之一進行工作。

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

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

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

云服務器 GPU云服務器 java運行時環境下載作為一個 iis7和iis8如何配置asp運行環境 UI設計器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101728.html

React as a UI Runtime(二、React元素和入口)

摘要：元素在宿主環境中，一個宿主實例是最小的單位像節點。在中最小的單位是元素。他們總是不斷的重建和銷毀。元素是不可變的。比如，你不能改變一個元素的屬性和其他屬性。入口每一個渲染器都有一個入口。當我們說，就意味著親愛的，將我的元素放到的宿主樹去。 1、React元素在宿主環境中，一個宿主實例是最小的單位（像DOM節點）。在React中最小的單位是React元素。一個React元素就是一個描述...

zhjx922 2019-08-23 15:16 評論0 收藏0
React as a UI Runtime(三、協調)

摘要：確定宿主樹怎么樣來響應新的信息的這個過程被稱為協調。協調有兩種方法。我們已經創建了一個作為第一個也是唯一一個子元素，并且我們希望在同一個地方再次渲染一個。這個已經與的思想非常接近了。 1.協調如果我們在同一個容器中使用兩次ReactDOM.render()會發生什么？ ReactDOM.render( , document.getElementById(container) ...

劉德剛 2019-08-23 15:19 評論0 收藏0
Deep In React之淺談 React Fiber 架構(一)

摘要：在上面我們已經知道瀏覽器是一幀一幀執行的，在兩個執行幀之間，主線程通常會有一小段空閑時間，可以在這個空閑期調用空閑期回調，執行一些任務。另外由于這些堆棧是可以自己控制的，所以可以加入并發或者錯誤邊界等功能。文章首發于個人博客前言 2016 年都已經透露出來的概念，這都 9102 年了，我才開始寫 Fiber 的文章，表示慚愧呀。不過現在好的是關于 Fiber 的資料已經很豐富了，...

Jiavan 2019-08-23 18:19 評論0 收藏0
[譯] 探索 Angular 使用 ViewContainerRef 操作 DOM

摘要：在探索抽象類前，先了解下如何在組件指令中獲取這些抽象類。下面示例描述在組建模板中如何創建如同其他抽象類一樣，通過屬性綁定元素，比如上例中，綁定的是會被渲染為注釋的元素，所以輸出也將是。你可以使用查詢模板引用變量來獲得抽象類。原文鏈接：Exploring Angular DOM manipulation techniques using ViewContainerRef如果想深入學習 ...

wind5o 2019-08-22 15:33 評論0 收藏0
React as a UI Runtime(四、條件)

摘要：我們不想要因為重新創建元素而失去它的選中狀態，聚焦狀態和顯示內容。幸好這個問題有一個簡單的修復方式，他并不在應用中常見。那么會執行類似于下面的代碼的狀態并不會改變如果React在更新中只重用與元素類型相匹配的宿主實例，那按渲染條件選擇的內容怎么辦呢？正如下面的代碼，假如我們開始至需要一個input，但稍后需要在它之前渲染一個message ： // 第一次渲染 ReactDOM.re...

stonezhu 2019-08-23 15:22 評論0 收藏0