[英]Does React Native have a 'Virtual DOM'?
来自关于虚拟 DOM 的ReactJS wiki页面:
React 创建内存数据结构缓存,计算结果差异,然后高效地更新浏览器显示的 DOM。 这允许程序员编写代码,就像在每次更改时渲染整个页面一样,而 React 库仅渲染实际更改的子组件。
换句话说,Virtual DOM 允许我们通过避免直接操作 DOM 来提高性能。
但是React Native呢?
我们知道理论上在其他平台上有原生视图和 UI 组件。 与 DOM 本身无关。 那么我们可以说 React Native 有“Virtual DOM”还是我们在谈论其他东西?
例如, Weex规范中有一个部分描述了直接使用 DOM 树的方法。 我的假设是,我们可能会认为 React Native 也应该有某种 DOM 树以及“虚拟 DOM”抽象层,这是 React 本身的主要思想。
所以我的问题是:
React Native 是否有某种“虚拟 DOM”(或其表示),如果有,这个“虚拟 DOM”是如何移植到各种平台的?
更新:
这个问题的目的是阐明 React Native 如何管理原生 UI 组件的渲染。 是否有任何具体方法,如果有,它的正式名称是什么?
更新 2:
嗯..本质上,是的,就像 Reactjs 的虚拟 DOM 一样,React-Native 创建一个树层次结构来定义初始布局,并在每次布局更改时创建该树的差异以优化渲染。 除了 React-Native 通过几个架构层管理 UI 更新,这些架构层最终会转换视图的渲染方式,同时尝试将更改优化到最低限度,以提供可能的最快渲染。
为了了解 react native 如何在后台创建视图,您需要了解基础知识,为此,我宁愿从头开始
Yoga是一个用 C 编写的跨平台布局引擎,它通过绑定到原生视图(Java Android Views / Objective-C iOS UIKit)来实现 Flexbox。
React-Native 中各种视图、文本和图像的所有布局计算都是通过yoga完成的,这基本上是我们的视图显示在屏幕上之前的最后一步
当 react-native 发送命令来渲染布局时,一组阴影节点被组装起来构建阴影树,它代表了布局的可变原生端(即:用相应的原生语言编写,Java for Android 和 Objective-C对于 iOS),然后将其转换为屏幕上的实际视图(使用 Yoga)。
ViewManger 是一个接口,它知道如何将从 JavaScript 发送的视图类型转换为它们的原生 UI 组件。 ViewManager 知道如何创建阴影节点、原生视图节点和更新视图。 在 React-Native 框架中,有很多 ViewManager 支持使用原生组件。 例如,如果有一天你想创建一个新的自定义视图并将其添加到 react-native,该视图将必须实现 ViewManager 接口
UIManager 是拼图的最后一块,或者实际上是第一块。 JavaScript JSX 声明性命令作为命令式命令发送到本机,这些命令告诉 React-Native 如何逐步迭代地布局视图。 因此,作为第一次渲染,UIManager 将分派命令以创建必要的视图,并随着应用程序的 UI 随时间变化而继续发送更新差异。
所以 React-Native 基本上还是利用了 Reactjs 的能力来计算上一次渲染和当前渲染表示之间的差异,并相应地将事件分派给 UIManager
为了更深入地了解这个过程,我推荐Emil Sjölander在弗罗茨瓦夫举行的 React-Native EU 2017 会议上的以下演讲
我不知道这是否是您问题的答案,但我在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 代码或任何名称的 Android UI 库的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.