React Native 有“虚拟 DOM"吗?
来自 ReactJS wiki 关于虚拟 DOM 的页面:
From ReactJS wiki page about Virtual DOM:
React 创建一个内存数据结构缓存，计算产生的差异，然后更新浏览器显示的 DOM有效率的.这允许程序员编写代码，就好像整个页面在每次更改时呈现，而 React 库仅渲染实际发生变化的子组件.
React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change.
换句话说，Virtual DOM 允许我们通过避免直接操作 DOM 来提高性能.
In other words, Virtual DOM allows us to improve performance by avoiding direct manipulations with DOM.
但是 React Native 怎么样?
我们知道理论上在其他平台上有原生视图和 UI 组件.与 DOM 本身无关.那么我们可以说 React Native 有虚拟 DOM"，还是我们在谈论其他东西?
We know that in theory on other platforms there are native views and UI components. There is nothing about DOM itself. So can we say React Native has "Virtual DOM" there or we're talking about something else?
例如有一个Weex 规范中的 ">部分 描述了直接使用 DOM 树的方法.我的假设是，我们可能会认为 React Native 也应该有某种 DOM 树以及虚拟 DOM"抽象层，这是 React 本身的主要思想.
For example, there is a section in Weex specs which describes methods to work with DOM-tree directly. And my assumption is that potentially we can think React Native should have some sort of DOM-tree too as well as "Virtual DOM" abstraction layer which is the main idea of React itself.
所以我的问题是:
React Native 是否有某种虚拟 DOM"(或其表示)，如果有，这个虚拟 DOM"是如何移植到各种平台的?
更新:
这个问题的目的是阐明 React Native 如何管理原生 UI 组件的渲染.有什么具体的方法吗?如果有，它的正式名称是什么?
The goal of this question is to shed some light on how React Native manage rendering of native UI components. Is there any specific approach and if so, how it's officially called?
更新 2:
This article describes new React architecture called Fiber which looks like the answer on this question.
In Short
嗯.. 本质上，是的，就像 Reactjs 的 Virtual DOM 一样，React-Native 创建一个树层次结构来定义初始布局，并在每次布局更改时创建该树的差异以优化渲染.除了 React-Native 通过几个架构层管理 UI 更新，这些架构层最终会转换视图的呈现方式，同时尝试将更改优化到最低限度，以提供尽可能最快的呈现速度.
In Short
Well.. in essence, yes, just like Reactjs's Virtual DOM, React-Native creates a tree hierarchy to define the initial layout and creates a diff of that tree on each layout change to optimize the renderings. Except React-Native manages the UI updates through couple of architecture layers that in the end translate how views should be rendered while trying to optimize the changes to a minimum in order to deliver the fastest rendering possible.
为了了解 react native 如何在后台创建视图，您需要了解基础知识，为此，我宁愿从头开始
In order to understand how react native creates views in the background, you'll need to understand the fundamentals, and for that, I'd rather start from the ground up
Yoga 是一个用 C 语言编写的跨平台布局引擎，它通过绑定到原生视图来实现 Flexbox(Java Android 视图/Objective-C iOS UIKit).
Yoga is a cross-platform layout engine written in C which implements Flexbox through bindings to the native views (Java Android Views / Objective-C iOS UIKit).
React-Native 中各种视图、文本和图像的所有布局计算都是通过yoga完成的，这基本上是我们的视图显示在屏幕上之前的最后一步
All the layout calculations of the various views, texts and images in React-Native are done through yoga, this is basically the last step before our views get displayed on the screen
当 react-native 发送渲染布局的命令时，一组 shadow 节点被组装起来构建 shadow 树，表示布局的可变原生端(即:用相应的原生各自语言编写，Java for Android 和iOS 版 Objective-C)，然后将其转换为屏幕上的实际视图(使用 Yoga).
When react-native sends the commands to render the layout, a group of shadow nodes are assembled to build shadow tree which represented the mutable native side of the layout (i.e: written in the corresponding native respective language, Java for Android and Objective-C for iOS) which is then translated to the actual views on screen (using Yoga).
ViewManger 是一个接口，它知道如何将从 JavaScript 发送的视图类型转换为它们的原生 UI 组件.ViewManager 知道如何创建阴影节点、原生视图节点和更新视图.在 React-Native 框架中，有很多 ViewManager 可以启用原生组件的使用.例如，如果有一天你想创建一个新的自定义视图并将其添加到 react-native，该视图将必须实现 ViewManager 接口
The ViewManger is an interface that knows how to translate the View Types sent from the JavaScript into their native UI components. The ViewManager knows how to create a shadow node, a native view node and to update the views. In the React-Native framework, there are a lot of ViewManager that enable the usage of the native components. If for example, you'd someday like to create a new custom view and add it to react-native, that view will have to implement the ViewManager interface
UIManager 是拼图的最后一块，或者实际上是第一块.JavaScript JSX 声明性命令作为命令式命令发送到本机，这些命令告诉 React-Native 如何逐步迭代地布局视图.因此，作为第一次渲染，UIManager 将分派命令以创建必要的视图，并随着应用程序的 UI 随时间变化而继续发送更新差异.
The UIManager is the final piece of the puzzle, or actually the first. The JavaScript JSX declarative commands are sent to the native as Imperative commands that tell React-Native how to layout the views, step by step iteratively. So as a first render, the UIManager will dispatch the command to create the necessary views and will continue to send the update diffs as the UI of the app changes over time.
所以React-Native基本上还是利用了Reactjs的能力来计算上次渲染和当前渲染的差异，并相应地将事件分派给UIManager
So React-Native basically still uses Reactjs's ability to calculate The difference between the previous and the current rendering representation and dispatches the events to the UIManager accordingly
要更深入地了解这个过程，我推荐以下演示作者:Emil Sjölander，来自弗罗茨瓦夫的 React-Native EU 2017 会议
To know about the process a bit more in depth, I recommend the following presentation by Emil Sjölander from the React-Native EU 2017 Conference in Wroclaw