React Native 有“虚拟 DOM”吗？

IT技术 javascript reactjs react-native virtual-dom react-fiber

2021-03-26 23:50:13

来自关于虚拟 DOM 的ReactJS wiki页面：

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

换句话说，Virtual DOM 允许我们通过避免直接操作 DOM 来提高性能。

但是React Native呢？

我们知道理论上在其他平台上有原生视图和 UI 组件。与 DOM 本身无关。那么我们可以说 React Native 有“虚拟 DOM”还是我们在谈论其他东西？

例如，有一个部分在Weex规格直接描述了工作方法与DOM树。我的假设是，我们可能会认为 React Native 也应该有某种 DOM 树以及“虚拟 DOM”抽象层，这是 React 本身的主要思想。

所以我的问题是：

React Native 是否有某种“虚拟 DOM”（或其表示），如果有，这个“虚拟 DOM”是如何移植到各种平台的？

更新：

这个问题的目的是阐明 React Native 如何管理原生 UI 组件的渲染。是否有任何具体方法，如果有，它的正式名称是什么？

更新 2：

这篇文章描述了名为Fiber 的新 React 架构，它看起来像是这个问题的答案。

4个回答

简而言之

嗯.. 本质上，是的，就像 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

了解的过程有点更深入，我提出以下建议文稿由埃米尔Sjölander从阵营-欧盟本土2017年会议在Wroclaw

我不知道这是否是您问题的答案，但我在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”似乎更接近于可以映射到各种技术的元素的内部结构/表示。

本文描述了名为Fiber 的新 React 架构。这似乎是关于 React Native 正在发生的事情的正确答案，或者至少是 React Native 将在不久的将来尝试实现的目标。

DOM 只是 React 可以渲染的渲染环境之一，其他主要目标是通过 React Native 的原生 iOS 和 Android 视图。（这就是为什么“虚拟 DOM”有点用词不当。）

它可以支持这么多目标的原因是因为 React 被设计为协调和渲染是分开的阶段。协调器负责计算树的哪些部分发生了变化；然后渲染器使用该信息来实际更新渲染的应用程序。

这种分离意味着 React DOM 和 React Native 可以使用自己的渲染器，同时共享由 React 核心提供的相同的协调器。

Fiber 重新实现了协调器。

这是一个过度简化：ReactJS 输出可以呈现给浏览器的 DOM。正如你已经知道的，虚拟 DOM 帮助 ReactJS 有效地跟踪变化的增量。对于 iOS 的 React Native，最终它会输出 UIKit 代码。与 React Native for Android 相同，但不是输出 DOM 或 UI Kit，而是使用 Android SDK 创建输出。所以虚拟 DOM 只是一个中间步骤。它可以被认为是内部数据结构的组合，用于保存描述在何处呈现按钮和文本框的数据，当你点击按钮时会发生什么，等等，以及一种有效的算法来跟踪发生了什么变化。相同的代码可用于所有平台。只有最后一步不同。根据平台的不同，它具有生成 DOM 的代码、UIKit 代码、

其它你可能感兴趣的问题

上一篇如何在 React 中使用 Redux 的 Provider 下一篇当只有一个效果的 deps 发生变化，而其他的不发生变化时，对 useEffect Hook 做出react