比较来自世界各地的卖家的域名和 IT 服务价格

李伊娜 React Native 'Virtual DOM'?

来自页面 ReactJS wiki 关于虚拟 DOM:

React 在内存中创建数据结构缓存,计算
产生的差异,然后更新显示的 DOM 浏览器
高效。 这允许程序员写代码,就像
整个页面显示在每个变化,而库 React
仅显示真正改变的子组件。

换一种说法, Virtual DOM 允许我们通过避免直接操纵来提高生产率 DOM.

但怎么样
https://facebook.github.io/react-native/
?

我们从理论上了解在其他平台上有我们自己的想法和组件。 UI. 最重要的是 DOM.

所以,我们可以这么说 React Native 它有 "Virtual DOM" 在那里,或者我们在谈论其他事情?

例如,在规格中
https://weex-project.io/

https://github.com/alibaba/wee ... ers-2
, 这描述了如何直接工作 DOM-tree. 我认为我们可能会想到这一点 React Native 也应该有某种树 DOM, 以及一层抽象 "Virtual DOM", 这是一个主要思想 React.

因此,我的问题是:

李伊娜 React Native 某种 "Virtual DOM" /或者他的观点/, 如果是这样,就像这样 "Virtual DOM" 转移到各种平台?

UPDATE

:

这个问题的目的是揭示如何 React Native 管理自己的组件呈现 UI. 有没有特别的方法,如果是的话,它是如何正式打电话的?

UPDATE 2

:

https://github.com/acdlite/rea ... ering
描述了一个新的架构 React 题为
https://github.com/acdlite/rea ... cture
, 这看起来像这个问题的答案。
已邀请:

奔跑吧少年

赞同来自:

简而言之

好吧......实质上,是的,就像一个虚拟 Reactjs DOM, React-Native 创建树层次结构以确定初始布局并创建 diff 这棵树与每个更改的布局进行了优化可视化。 除了那个 React-Native 管理更新 UI 在几层架构之后,最终转换了如何可视化视图,尝试优化变化到最小,以确保最高可能的渲染。

更详细的解释

了解卫星 react native 在后台创建视图,您需要了解基本原则,为此,我宁愿从头开始

马达 1.The 布局瑜伽

https://github.com/facebook/yoga
- 它是布局的跨平台布局,用语言编写 C, 这是实施 Flexbox 通过绑定自己的想法

/Java Android 陈述 / Objective-C iOS UIKit/

.

所有类型的各种类型,文本和图像的布局计算 React-Native 使用瑜伽进行,在屏幕上显示我们的物种之前,它基本上是最后一步

2. 阴影树/阴影节点

什么时候 react-native 发送渲染布局的命令,一组阴影节点将要构建一个阴影树,表示布局的变量本机 /即用相关母语书写, Java 为了 Android 和 Objective-C 为了 iOS/, 然后将其转换为屏幕上的实际视图 /在瑜伽的帮助下/.

3. ViewManager

ViewManger是一个界面,知道如何翻译已发送的表示类型 JavaScript, 在他们自己的组件中 UI.
ViewManager 他知道如何创建影子节点,自己的演示节点和更新视图。
在框架里 React-Native 有许多 ViewManager, 允许您使用自己的组件。
例如,如果您想要创建新的用户性能并将其添加到 react-native, 然后,此视图必须实现界面 ViewManager

4. UIManager

UIManager - 这是拼图的最后一部分,或者实际上是第一个。
宣言团队 JavaScript JSX 转到机器代码作为报告的命令 React-Native, 如何迭代地逐步定位视图。
因此,作为第一次渲染 UIManager 将发送命令以创建必要的视图并继续发送更新中的差异 UI 应用程序随着时间的推移而变化。

因此, React-Native 主要仍然使用这种能力 Reactjs 计算前一个和当前渲染表示之间的差异,因此将事件发送到 UIManager

要更多地了解此过程,我推荐以下内容
https://www.youtube.com/watch?v=8va9prUqjnA
https://github.com/EmilSjolander
与会议 React-Native EU 2017 弗罗茨瓦夫的一年

石油百科

赞同来自:

我不知道这是否是你问题的答案,但我发现了它
https://facebook.github.io/rea ... ation
:

React 创建并支持可视化的内部表示 UI. 它包括元素与组件反应。 这个表示允许 React 避免创建节点 DOM 并且访问现有节点是不需要的,因为它可以比使用对象的操作慢 JavaScript. 有时它被称为 "虚拟的 DOM", 但他完全相同 React Native.

因此,我会说是的,他在使用的那个中管理一个非常相似的内部表示 React.js. 然后我假设他使用 Javascript APIs 用于呈现自己的想法,就像提供一样
https://medium.com/%40jiyinyiy ... s8rmb
.

编辑

http://news.ycombinator.com/item?id=8964935
, 假如

在评论中,它也很有趣,因为团队成员 React /和 React Native/ 说:

React Native 表明 ReactJS 一直有更多关于 "zero DOM", 比O. "virtual DOM" /与流行的信仰相反/.

看来所谓的 "React virtual DOM" 更接近内部结构/可以与各种技术进行比较的元素的表示 HTML DOM.

詹大官人

赞同来自:

https://github.com/acdlite/rea ... ering
描述了一个新的架构 React 题为
https://github.com/acdlite/rea ... cture
. 这似乎这是关于正在发生的事情的正确答案 React Native 或者至少是什么 React Native 将尝试在不久的将来实现。

DOM只是其中一个渲染环境 React 可以渲染
和其他主要目标是您自己的观点 iOS 和 Android 穿过 React
Native. /这就是为什么 "virtual DOM"- 这是一个错误的名字。/

他可以支持这么多目的的原因是那样 React 设计
因此,批准和渲染是个别阶段。
保留器执行工作以计算树的哪些部分
改变; 然后,Visualizer使用此信息进行实际更新。
显示的应用程序。

这种分离意味着 React DOM 和 React Native 可以用自己的
自己的渲染,一起使用相同的输出 React
core.

纤维覆盖了调解。

龙天

赞同来自:

这是一个过度的简化: ReactJS 显示 DOM, 可以显示浏览器。 你怎么知道,虚拟 DOM 帮助 ReactJS 有效地跟踪改变的δ。 为了 React Native 为了 iOS, 最终,它显示了代码 UIKit. 与此同样 React Native 为了 Android, 但代替产出 DOM 或者 UI 使用输出设置的集合使用 Android SDKs. 以便 virtual DOM只是一个中间步骤。 它可以被视为内部数据结构的组合,用于存储描述在何处可视化按钮的数据和 textbox, 按下按钮等时会发生什么,以及用于跟踪已更改的有效算法。 相同的代码可用于所有平台。 只有最后一步是不同的。 根据平台,它具有生成代码的代码 DOM, UIKit 或任何其他名称 Android UI lib 叫。

要回复问题请先登录注册