本文 描述了新的React架构 纤维 。它似乎是React Native中发生的事情的正确答案,或者至少是React Native将在最近的将来尝试实现的目标。
DOM只是React可以呈现的渲染环境之一, 其他主要目标是通过React进行原生iOS和Android视图 本土。 (这就是“虚拟DOM”有点用词不当的原因。) 它可以支持这么多目标的原因是因为React的设计 因此,对帐和渲染是分开的阶段。该 调和程序完成计算树的哪些部分的工作 改变;然后,渲染器使用该信息进行实际更新 渲染的应用程序。 这种分离意味着React DOM和React Native可以使用它们 React提供的共享同一个协调程序时自己的渲染器 核心。 光纤重新实现了协调。
DOM只是React可以呈现的渲染环境之一, 其他主要目标是通过React进行原生iOS和Android视图 本土。 (这就是“虚拟DOM”有点用词不当的原因。)
它可以支持这么多目标的原因是因为React的设计 因此,对帐和渲染是分开的阶段。该 调和程序完成计算树的哪些部分的工作 改变;然后,渲染器使用该信息进行实际更新 渲染的应用程序。
这种分离意味着React DOM和React Native可以使用它们 React提供的共享同一个协调程序时自己的渲染器 核心。
光纤重新实现了协调。
嗯..实质上,是的,就像Reactjs的Virtual DOM一样,React-Native创建了一个树层次结构来定义初始布局,并在每个布局更改中创建该树的差异以优化渲染。除了React-Native之外,还通过几个架构层管理UI更新,这些架构层最终会转换视图的呈现方式,同时尝试将更改优化到最小,以便尽可能提供最快的渲染。
为了理解native如何在后台创建视图,你需要了解基础知识,为此,我宁愿从头开始
瑜伽 是一个用C语言编写的跨平台布局引擎,它通过绑定到本机视图来实现Flexbox (Java Android Views / Objective-C iOS UIKit) 。
React-Native中各种视图,文本和图像的所有布局计算都是通过瑜伽完成的,这基本上是我们的视图在屏幕上显示之前的最后一步
当react-native发送命令以呈现布局时,将组装一组阴影节点以构建阴影树,该阴影树表示布局的可变本机端(即:使用相应的本机相应语言编写,适用于Android的Java和Objective-C对于iOS),然后将其翻译为屏幕上的实际视图(使用瑜伽)。
ViewManger是一个知道如何将从JavaScript发送的视图类型转换为其本机UI组件的界面。 ViewManager知道如何创建影子节点,本机视图节点以及更新视图。 在React-Native框架中,有许多ViewManager支持使用本机组件。 例如,如果您有一天想创建一个新的自定义视图并将其添加到react-native,那么该视图将必须实现ViewManager接口
UIManager是拼图的最后一块,实际上是第一块。 JavaScript JSX声明性命令作为Imperative命令发送到本机,告诉React-Native如何迭代地逐步布局视图。 因此,作为第一个渲染,UIManager将调度命令以创建必要的视图,并随着应用程序的UI随时间变化而继续发送更新差异。
所以React-Native基本上仍然使用Reactjs的能力来计算前一个和当前渲染表示之间的差异,并相应地将事件分派给UIManager
为了更深入地了解这个过程,我建议如下 介绍 通过 EmilSjölander 来自弗罗茨瓦夫React-Native EU 2017会议
这是一个过度简化:ReactJS输出可以渲染浏览器的DOM。如您所知,虚拟DOM帮助ReactJS有效地跟踪已更改内容的增量。对于React Native for iOS,最终它会输出UIKit代码。与React Native for Android相同,但输出是使用Android SDK创建的,而不是输出DOM或UI Kit。所以虚拟DOM只是一个中间步骤。它可以被视为内部数据结构的组合,用于保存描述按钮和文本框呈现位置的数据,选项卡按钮时发生的情况等,以及跟踪已更改内容的有效算法。相同的代码可用于所有平台。只有最后一步是不同的。根据平台,它具有生成DOM,UIKit代码或任何名称Android UI lib的代码。
我不知道这是否是你问题的答案,但我发现了这个问题 官方的React文档:
React构建并维护呈现的UI的内部表示。它包括从组件返回的React元素。这种表示使得React可以避免创建DOM节点并访问超出必要的现有节点,因为这可能比JavaScript对象上的操作慢。有时它被称为“虚拟DOM”,但它在React Native上的工作方式相同。
所以我会说是的,它管理一个与React.js中使用的内部表示非常相似的内部表示。然后我猜它使用Javascript API来渲染本机视图 你读过的文章 提示。
的 编辑 强> 这个帖子 由...提供 Sebas 在评论中也很有趣,因为React(和React Native)团队的成员说:
React Native表明,ReactJS一直比“虚拟DOM”更关注“零DOM”(与普遍看法相反)。
看起来所谓的“React虚拟DOM”更接近于可以映射到各种技术而不是HTML DOM的元素的内部结构/表示。