React Native有“虚拟DOM”吗？

作者: 那月静好
发布时间: 2024-08-20 09:38:15 (13天前)
转自：

5 条回复

0#
回复此人
小它．Little it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="https://github.com/acdlite/react-fiber-architecture/blob/master/README.md#reconciliation-versus-rendering" rel="nofollow noreferrer"> 本文 </A> 描述了新的React架构 <a href="https://github.com/acdlite/react-fiber-architecture" rel="nofollow noreferrer"> 纤维 </A> 。它似乎是React Native中发生的事情的正确答案，或者至少是React Native将在最近的将来尝试实现的目标。 </p> <BLOCKQUOTE> <P> DOM只是React可以呈现的渲染环境之一，其他主要目标是通过React进行原生iOS和Android视图本土。（这就是“虚拟DOM”有点用词不当的原因。） </p> <P> 它可以支持这么多目标的原因是因为React的设计因此，对帐和渲染是分开的阶段。该调和程序完成计算树的哪些部分的工作改变;然后，渲染器使用该信息进行实际更新渲染的应用程序。 </p> <P> 这种分离意味着React DOM和React Native可以使用它们 React提供的共享同一个协调程序时自己的渲染器核心。 </p> <P> 光纤重新实现了协调。 </p> </BLOCKQUOTE> </DIV>

编辑
1#
回复此人
喜欢一个人丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> 简而言之 </H1> <P> 嗯..实质上，是的，就像Reactjs的Virtual DOM一样，React-Native创建了一个树层次结构来定义初始布局，并在每个布局更改中创建该树的差异以优化渲染。除了React-Native之外，还通过几个架构层管理UI更新，这些架构层最终会转换视图的呈现方式，同时尝试将更改优化到最小，以便尽可能提供最快的渲染。 </p> <H1> 更详细的解释 </H1> <P> 为了理解native如何在后台创建视图，你需要了解基础知识，为此，我宁愿从头开始 </p> <H3> 1.瑜伽布局引擎 </H3> <P> <a href="https://github.com/facebook/yoga" rel="noreferrer"> 瑜伽 </A> 是一个用C语言编写的跨平台布局引擎，它通过绑定到本机视图来实现Flexbox <EM> （Java Android Views / Objective-C iOS UIKit） </EM> 。 </p> <P> React-Native中各种视图，文本和图像的所有布局计算都是通过瑜伽完成的，这基本上是我们的视图在屏幕上显示之前的最后一步 </p> <H3> 2.影子树/影子节点 </H3> <P> 当react-native发送命令以呈现布局时，将组装一组阴影节点以构建阴影树，该阴影树表示布局的可变本机端（即：使用相应的本机相应语言编写，适用于Android的Java和Objective-C对于iOS），然后将其翻译为屏幕上的实际视图（使用瑜伽）。 </p> <H3> 3. ViewManager </H3> <P> ViewManger是一个知道如何将从JavaScript发送的视图类型转换为其本机UI组件的界面。 ViewManager知道如何创建影子节点，本机视图节点以及更新视图。在React-Native框架中，有许多ViewManager支持使用本机组件。例如，如果您有一天想创建一个新的自定义视图并将其添加到react-native，那么该视图将必须实现ViewManager接口 </p> <H3> 4. UIManager </H3> <P> UIManager是拼图的最后一块，实际上是第一块。 JavaScript JSX声明性命令作为Imperative命令发送到本机，告诉React-Native如何迭代地逐步布局视图。因此，作为第一个渲染，UIManager将调度命令以创建必要的视图，并随着应用程序的UI随时间变化而继续发送更新差异。 </p> <P> 所以React-Native基本上仍然使用Reactjs的能力来计算前一个和当前渲染表示之间的差异，并相应地将事件分派给UIManager </p> <P> 为了更深入地了解这个过程，我建议如下 <a href="https://www.youtube.com/watch?v=jFiQ6FxBDqY" rel="noreferrer"> 介绍 </A> 通过 <a href="https://github.com/EmilSjolander" rel="noreferrer"> EmilSjölander </A> 来自弗罗茨瓦夫React-Native EU 2017会议 </p> </DIV>

编辑
2#
回复此人
老夫的少女心吖 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一个过度简化：ReactJS输出可以渲染浏览器的DOM。如您所知，虚拟DOM帮助ReactJS有效地跟踪已更改内容的增量。对于React Native for iOS，最终它会输出UIKit代码。与React Native for Android相同，但输出是使用Android SDK创建的，而不是输出DOM或UI Kit。所以虚拟DOM只是一个中间步骤。它可以被视为内部数据结构的组合，用于保存描述按钮和文本框呈现位置的数据，选项卡按钮时发生的情况等，以及跟踪已更改内容的有效算法。相同的代码可用于所有平台。只有最后一步是不同的。根据平台，它具有生成DOM，UIKit代码或任何名称Android UI lib的代码。 </p> </DIV>

编辑
3#
回复此人
晴天？霹雳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我不知道这是否是你问题的答案，但我发现了这个问题 <a href="https://facebook.github.io/react/docs/optimizing-performance.html#avoid-reconciliation" rel="nofollow noreferrer"> 官方的React文档： </A> </p> <BLOCKQUOTE> <P> React构建并维护呈现的UI的内部表示。它包括从组件返回的React元素。这种表示使得React可以避免创建DOM节点并访问超出必要的现有节点，因为这可能比JavaScript对象上的操作慢。有时它被称为“虚拟DOM”，但它在React Native上的工作方式相同。 </p> </BLOCKQUOTE> <P> 所以我会说是的，它管理一个与React.js中使用的内部表示非常相似的内部表示。然后我猜它使用Javascript API来渲染本机视图 <a href="https://medium.com/@jiyinyiyong/virtual-dom-is-the-new-ir-67839bcb5c71#.eoijs8rmb" rel="nofollow noreferrer"> 你读过的文章 </A> 提示。 </p> <P> 的<strong> 编辑 </强> <a href="http://news.ycombinator.com/item?id=8964935" rel="nofollow noreferrer"> 这个帖子 </A> 由...提供 <a href="https://stackoverflow.com/users/1291428/sebas"> Sebas </A> 在评论中也很有趣，因为React（和React Native）团队的成员说： </p> <BLOCKQUOTE> <P> React Native表明，ReactJS一直比“虚拟DOM”更关注“零DOM”（与普遍看法相反）。 </p> </BLOCKQUOTE> <P> 看起来所谓的“React虚拟DOM”更接近于可以映射到各种技术而不是HTML DOM的元素的内部结构/表示。 </p> </DIV>

编辑

登录后才能参与评论