React Native有"虚拟DOM"吗？

Question

从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架构,它看起来像这个问题的答案.

Answer 1

简而言之

嗯..实质上,是的,就像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会议上的以下演讲.

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 重新实现了协调器。