QuikieApps

虚拟Dom:虚拟DOM入门|真实DOM

反应 用户必须注意该术语 “虚拟DOM”。因此,什么是虚拟DOM?在React中它在哪里有用?

真实DOM:

DOM代表 “文档对象模型”。 DOM基本上 代表您的应用程序的用户界面。 

只要您的应用程序UI的状态发生变化,DOM就会更新。 

但是,对DOM的频繁操作会影响react应用程序的性能,从而使其 慢。 DOM表示为 快速进行DOM更改和更新的数据结构。

更改之后,必须再次呈现已更新元素的子节点以及已更新元素本身,以更新应用程序UI,从而使应用程序运行缓慢。

可以肯定地说,应用程序中包含的组件数量越多,每次DOM更新都需要一次又一次地呈现DOM更新。

虚拟DOM:

由于真实DOM中的重新渲染问题,虚拟DOM的概念开始发挥作用,并且可以看出它的性能明显优于真实DOM。实际上,虚拟DOM只是一个 真实DOM的虚拟表示。人们可能会问为什么虚拟DOM必须执行与真实DOM相同的工作时,为什么需要虚拟DOM,这使我们要做两倍的工作。好吧,事实是 虚拟DOM比真实DOM更快,更高效。

什么是虚拟DOM?

DOM代表数据对象模型,并定义了 文件的逻辑结构 以及它的方式 访问和操纵。除了促进 跨平台 特征 DOM也是 语言无关界面 将XML或HTML文档视为树形结构。 DOM操作已成为当今交互式Web的核心,但不幸的是,它比大多数JavaScript操作要慢得多。

的JavaScript框架对DOM的更新远远超过了所需的事实,这使得DOM的慢速运行变得更糟。这种低效的更新已成为现代网站中的严重问题。为了最小化这个问题, 反应普及的虚拟DOM 在很大程度上。在现代Web开发中,DOM对于理解至关重要。它主要用于 创建一个节点 使用 的JavaScript

DOM是现代交互式Web的心脏。

它定义了文档的结构,浏览器会转换您的网页或

将文档转换成DOM,即文档作为对象的表示形式,

因为它可以使用您的脚本语言(如JavaScript)进行操作或修改。

的JavaScript对象是“真实” DOM的“虚拟”表示形式,它定义了文档的逻辑结构及其操作和访问方式。但是更新到DOM不仅需要更新DOM,还涉及许多其他过程,这会使它变慢。因此,React使用虚拟DOM,这是 内存中表示 真实DOM的,而不是真正的DOM。

是什么使虚拟DOM更快?

在下图中,我们可以看到一个虚拟DOM由一棵树表示,每个节点代表该树上的一个元素。每当将新元素添加到UI时。虚拟DOM已创建。只要这些元素中的任何一个状态发生变化,就会创建一个新的虚拟DOM树。

然后将该树与先前的虚拟DOM树进行比较。毕竟,这完成了,虚拟DOM计算出对真实DOM进行这些更改的最佳可能性,从而确保了需要 实际DOM上的最少操作

下图显示了虚拟DOM树的比较过程。更改后的节点由 用户界面元素状态发生变化的圈子。现在,将计算当前的虚拟DOM树,再次渲染整个父子树以生成更新的UI。然后,将此虚拟更新的树批量更新为真实DOM。

什么是React?

      • 反应是一个JavaScript库 用于构建交互式用户界面(UI) 由...制作 乔丹·沃克, Facebook的软件工程师.
      •  它首先部署在Facebook的新闻提要中 2011 然后在instagram.com上 2012
      • 进一步制造 在JSConf US上开源2013年5月。 Facebook宣布 反应纤维2017年4月18日.
      •  反应360 V1.0.0。 已于公开发布 2017年4月19日。

 反应的虚拟DOM如何工作?

在了解了什么是虚拟DOM及其如何增强应用程序性能之后,让我们看一下React如何使用虚拟DOM。

反应用来处理虚拟DOM的过程称为 “与众不同”。这基本上是一个比较过程,将进一步详细讨论。 反应中的每个UI都被认为是 零件 每个组件都有其位置 唯一状态

反应的基本原则是遵循可观察的模式并寻找任何状态变化。只要任何组件的状态发生变化,React 更新 虚拟DOM树。在更新虚拟DOM之后,React然后 比较 使用较旧版本的虚拟DOM更新虚拟DOM的过程,该过程称为“差异化”。

反应仅更新真实DOM中在虚拟DOM中已更改的那些对象,从而使应用程序的性能比通过直接在真实DOM上直接更新对象的性能要好得多,从而使React 高性能JavaScript库.

我们在这里所做的只是告诉React我们希望UI处于哪个状态,并确保DOM匹配该状态。开发人员所需要做的就是在需要时更新其组件的状态,React负责其余的工作。 

这是浏览器呈现页面的方式:

是什么使React如此之快?

 

只要您的应用程序发生任何更改,它都会将视图输入到虚拟机中 DOM的表示形式。众所周知,与从JavaScript对象读取或写入DOM相比,读取和写入DOM的速度较慢。虚拟DOM是一个JavaScript对象, 所以反应 从不读取真实的DOM。它与虚拟DOM交互,并且在看到时 进行更改,然后继续进行,并非常有效地更新实际DOM,这就是使 反应非常快.

我们为什么要使用反应?

      • 仅更新和呈现DOM中更改/更新的元素(因此快速呈现)
      • 构建管理其自身状态的封装组件。
      • 通过使用Node和使用react-native的强大移动应用程序,React甚至可以在服务器上呈现。

虚拟DOM入门:

虚拟DOM是一种编程概念,其中UI的虚拟表示形式保存在内存中,以后使用诸如的库与真实DOM进行同步。 反应DOM。这被称为 和解。虚拟DOM以更高效的方式解决了DOM频繁更新的问题。与DOM或影子DOM不同,虚拟DOM是与DOM交互的一种新方法,而不是正式的规范。

虚拟DOM就像一个 复制 真正的DOM。与真正的DOM不同,虚拟DOM可以在不借助DOM API的情况下进行频繁的更新和操作。对虚拟DOM进行更新后,我们可以考虑对原始DOM进行哪些更改,并以优化的针对性方式进行更改。

虚拟DOM是什么样的?

“虚拟DOM”这个名称会使这个概念比实际的更加神秘。虚拟DOM只是普通的Javascript对象。

下面给出的是DOM树:

 

html

头lang =“ en”

身体

ul class =“ list”

li class =“ list__item”

“项目清单”

 

该树也可以表示为Javascript对象。

const vdom = { tagName: "html", children: [ { tagName: "head" }, { tagName: "身体", children: [ { tagName: "ul", attributes: { "class": "list" }, children: [ { tagName: "li", attributes: { "class": "list__item" }, textContent: "List item" } // end li ] } // end ul ] } // end 身体 ] } // end html 

我们可以将此对象视为虚拟DOM。就像真实的DOM一样,它是HTML文档的基于对象的表示形式。因为它只是一个Javascript对象,所以我们可以经常对其进行操作,而无需对实际DOM进行任何更改,直到最后。

代替对整个对象使用单个对象,更常见的是使用 小节 虚拟DOM。

const list = { tagName: "ul", attributes: { "class": "list" }, children: [ { tagName: "li", attributes: { "class": "list__item" }, textContent: "List item" } ] }; 

批量更新:

这是React更新实际DOM从而增强性能的机制。但是,不是按状态中的每个更改更改更新,而是对批量DOM发送真实DOM的更新。

结论:

我们将看到虚拟DOM如何轻松解决频繁更新DOM的框架问题。虚拟DOM绝对是主页上的佼佼者,因为它完全有助于React的高性能。更新ReactJs的虚拟DOM的速度更快,因为React使用高效的算法,批量更新,仅更新子树以及使用可观察对象来检测更改。虚拟DOM是向需要频繁更新的用户提供性能应用程序所必需的,并且它还附带纯开放源代码的工具。

Exit mobile version