React Native 有“虛擬 DOM”嗎？

Question

來自關於虛擬 DOM 的ReactJS wiki頁面：

React 創建內存數據結構緩存，計算結果差異，然后高效地更新瀏覽器顯示的 DOM。 這允許程序員編寫代碼，就像在每次更改時渲染整個頁面一樣，而 React 庫僅渲染實際更改的子組件。

換句話說，Virtual DOM 允許我們通過避免直接操作 DOM 來提高性能。

但是React Native呢？

我們知道理論上在其他平台上有原生視圖和 UI 組件。 與 DOM 本身無關。 那么我們可以說 React Native 有“Virtual DOM”還是我們在談論其他東西？

例如， Weex規范中有一個部分描述了直接使用 DOM 樹的方法。 我的假設是，我們可能會認為 React Native 也應該有某種 DOM 樹以及“虛擬 DOM”抽象層，這是 React 本身的主要思想。

所以我的問題是：

React Native 是否有某種“虛擬 DOM”（或其表示），如果有，這個“虛擬 DOM”是如何移植到各種平台的？

更新：

這個問題的目的是闡明 React Native 如何管理原生 UI 組件的渲染。 是否有任何具體方法，如果有，它的正式名稱是什么？

更新 2：

本文描述了名為Fiber 的新 React 架構，它看起來像是這個問題的答案。

Answer 1

簡而言之

嗯..本質上，是的，就像 Reactjs 的虛擬 DOM 一樣，React-Native 創建一個樹層次結構來定義初始布局，並在每次布局更改時創建該樹的差異以優化渲染。 除了 React-Native 通過幾個架構層管理 UI 更新，這些架構層最終會轉換視圖的渲染方式，同時嘗試將更改優化到最低限度，以提供可能的最快渲染。

更詳細的解釋

為了了解 react native 如何在后台創建視圖，您需要了解基礎知識，為此，我寧願從頭開始

1.Yoga布局引擎

Yoga是一個用 C 編寫的跨平台布局引擎，它通過綁定到原生視圖（Java Android Views / Objective-C iOS UIKit）來實現 Flexbox。

React-Native 中各種視圖、文本和圖像的所有布局計算都是通過yoga完成的，這基本上是我們的視圖顯示在屏幕上之前的最后一步

2. 陰影樹/陰影節點

當 react-native 發送命令來渲染布局時，一組陰影節點被組裝起來構建陰影樹，它代表了布局的可變原生端（即：用相應的原生語言編寫，Java for Android 和 Objective-C對於 iOS），然后將其轉換為屏幕上的實際視圖（使用 Yoga）。

3. 視圖管理器

ViewManger 是一個接口，它知道如何將從 JavaScript 發送的視圖類型轉換為它們的原生 UI 組件。 ViewManager 知道如何創建陰影節點、原生視圖節點和更新視圖。 在 React-Native 框架中，有很多 ViewManager 支持使用原生組件。 例如，如果有一天你想創建一個新的自定義視圖並將其添加到 react-native，該視圖將必須實現 ViewManager 接口

4. 界面管理器

UIManager 是拼圖的最后一塊，或者實際上是第一塊。 JavaScript JSX 聲明性命令作為命令式命令發送到本機，這些命令告訴 React-Native 如何逐步迭代地布局視圖。 因此，作為第一次渲染，UIManager 將分派命令以創建必要的視圖，並隨着應用程序的 UI 隨時間變化而繼續發送更新差異。

所以 React-Native 基本上還是利用了 Reactjs 的能力來計算上一次渲染和當前渲染表示之間的差異，並相應地將事件分派給 UIManager

為了更深入地了解這個過程，我推薦Emil Sjölander在弗羅茨瓦夫舉行的 React-Native EU 2017 會議上的以下演講

Answer 2

我不知道這是否是您問題的答案，但我在React 官方文檔中找到了這個：

React 構建並維護渲染 UI 的內部表示。 它包括您從組件返回的 React 元素。 這種表示讓 React 避免創建 DOM 節點並在不必要的情況下訪問現有節點，因為這可能比對 JavaScript 對象的操作慢。 有時它被稱為“虛擬 DOM”，但它在 React Native 上的工作方式相同。

所以我會說是的，它管理一種與 React.js 中使用的非常相似的內部表示。 然后我猜它使用 Javascript API 來呈現本機視圖，就像您閱讀的文章所建議的那樣。

編輯Sebas在評論中提供的這篇文章也很有趣，因為 React（和 React Native）團隊的一名成員說：

React Native 表明 ReactJS 總是更多地關注“零 DOM”而不是“虛擬 DOM”（與流行的看法相反）。

與 HTML DOM 相比，所謂的“React 虛擬 DOM”似乎更接近於可以映射到各種技術的元素的內部結構/表示。

Answer 3

本文描述了名為Fiber 的新 React 架構。 這似乎是關於 React Native 正在發生的事情的正確答案，或者至少是 React Native 將在不久的將來嘗試實現的目標。

DOM 只是 React 可以渲染的渲染環境之一，其他主要目標是通過 React Native 的原生 iOS 和 Android 視圖。 （這就是為什么“虛擬 DOM”有點用詞不當。）

它可以支持這么多目標的原因是因為 React 被設計為協調和渲染是分開的階段。 協調器負責計算樹的哪些部分發生了變化； 然后渲染器使用該信息來實際更新渲染的應用程序。

這種分離意味着 React DOM 和 React Native 可以使用自己的渲染器，同時共享由 React 核心提供的相同的協調器。

Fiber 重新實現了協調器。

Answer 4

這是一個過度簡化：ReactJS 輸出可以呈現給瀏覽器的 DOM。 正如你已經知道的，虛擬 DOM 幫助 ReactJS 有效地跟蹤變化的增量。 對於 iOS 的 React Native，最終它會輸出 UIKit 代碼。 與 React Native for Android 相同，但不是輸出 DOM 或 UI Kit，而是使用 Android SDK 創建輸出。 所以虛擬 DOM 只是一個中間步驟。 它可以被認為是內部數據結構的組合，用於保存描述在何處呈現按鈕和文本框的數據，當你點擊按鈕時會發生什么等，以及一種有效的算法來跟蹤發生了什么變化。 相同的代碼可用於所有平台。 只有最后一步不同。 根據平台的不同，它具有生成 DOM、UIKit 代碼或任何名稱的 Android UI 庫的代碼。