React Native有"虚拟DOM"吗？

从ReactJS wiki页面关于Virtual DOM:

React创建一个内存中的数据结构缓存,计算产生的差异,然后有效地更新浏览器显示的DOM.这允许程序员编写代码,就像在每次更改时呈现整个页面一样,而React库只渲染实际更改的子组件.

换句话说,Virtual DOM允许我们通过避免使用DOM直接操作来提高性能.

但是React Native怎么样？

我们知道在其他平台上理论上有本机视图和UI组件.DOM本身没有任何内容.那么我们可以说React Native在那里有"Virtual DOM",或者我们正在谈论别的东西吗？

例如,有一个部分在Weex规范,其描述的方法直接DOM树的工作.我的假设是,我们可以认为React Native也应该有某种DOM树以及"Virtual DOM"抽象层,这是React本身的主要思想.

所以我的问题是:

React Native是否有某种"虚拟DOM"(或其表示),如果是这样,这个"虚拟DOM"如何被移植到各种平台？

更新:

此问题的目的是阐明React Native如何管理本机UI组件的呈现.有没有具体的方法,如果有的话,它是如何被官方称为？

更新2:

本文介绍了名为Fibre的新React架构,它看起来像这个问题的答案.

嗯..实质上,是的,就像Reactjs的Virtual DOM一样,React-Native创建了一个树层次结构来定义初始布局,并在每个布局更改中创建该树的差异以优化渲染.除了React-Native之外,还通过几个架构层管理UI更新,这些架构层最终会转换视图的呈现方式,同时尝试将更改优化到最小,以便尽可能提供最快的渲染.

为了理解native如何在后台创建视图,你需要了解基础知识,为此,我宁愿从头开始

1.瑜伽布局引擎

Yoga是一个用C语言编写的跨平台布局引擎,它通过绑定到本机视图来实现Flexbox (Java Android Views/Objective-C iOS UIKit).

React-Native中各种视图,文本和图像的所有布局计算都是通过瑜伽完成的,这基本上是我们的视图在屏幕上显示之前的最后一步

2.影子树/影子节点

当react-native发送命令以呈现布局时,将组装一组阴影节点以构建阴影树,该阴影树表示布局的可变本机端(即:使用相应的本机相应语言编写,适用于Android的Java和Objective-C对于iOS),然后将其翻译为屏幕上的实际视图(使用瑜伽).

3. ViewManager

ViewManger是一个知道如何将从JavaScript发送的视图类型转换为其本机UI组件的界面.ViewManager知道如何创建影子节点,本机视图节点以及更新视图.在React-Native框架中,有许多ViewManager支持使用本机组件.例如,如果您有一天想创建一个新的自定义视图并将其添加到react-native,那么该视图将必须实现ViewManager接口

4. UIManager

UIManager是拼图的最后一块,实际上是第一块.JavaScript JSX声明性命令作为Imperative命令发送到本机,告诉React-Native如何迭代地逐步布局视图.因此,作为第一个渲染,UIManager将调度命令以创建必要的视图,并随着应用程序的UI随时间变化而继续发送更新差异.

所以React-Native基本上仍然使用Reactjs的能力来计算前一个和当前渲染表示之间的差异,并相应地将事件分派给UIManager

为了更深入地了解这个过程,我推荐EmilSjölander在弗罗茨瓦夫React-Native EU 2017会议上的以下演讲.