React Native有“虚拟DOM”吗？ [英] Does React Native have a 'Virtual 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在那里有Virtual 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?
例如，有一个<
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.
推荐答案
简而言之
嗯..实质上，是的，就像Reactjs的虚拟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.
为了理解本机如何在后台创建视图，你需要了解基础知识，并为此，我宁愿从头开始
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
瑜伽是一个用C语言编写的跨平台布局引擎，它通过绑定到本机视图来实现Flexbox （Java Android Views / 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中各种视图，文本和图像的所有布局计算都是通过瑜伽完成的，这是基本上是我们的观点在屏幕上显示之前的最后一步
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发送命令来渲染布局时，会组装一组影子节点来构建影子树，代表可变的本机端布局（即：用相应的原生语言编写，Android版Java和iOS版Objective-C），然后翻译成屏幕上的实际视图（使用瑜伽）。
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声明性命令作为Imperative命令发送给本机，告诉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
要知道关于这个过程的深入，我推荐以下演示文稿 EmilSjölander
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
这篇关于React Native有“虚拟DOM”吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
