保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

Virtual Dom: Getting started with 虚拟DOM | Real DOM

反应 用户必须注意该术语 “Virtual DOM”. So, what is a 虚拟DOM and where does it find its use 在 反应.

真实DOM:

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

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

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

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

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

虚拟DOM:

Due to the re-rendering issues 在 the 真实 DOM, the concept of 虚拟 DOM comes 在to play and it was seen that it performed significantly better than the 真实 DOM. In fact, the 虚拟 DOM is 上 ly a 虚拟的表示real DOM. People might wonder why there is any need for a 虚拟 DOM when it has to do the same job as that of the 真实 DOM, making us do twice as much work. Well, the truth is that the 虚拟 DOM is much faster and efficient than the 真实 DOM.

What is 虚拟DOM?

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

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

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

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

document 在to DOM, which is the的表示document as an object and it does that

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

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

What makes 虚拟 DOM faster?

In the following image, we can see a 虚拟 DOM is represented by a 树 with each node representing an element 上 the 树. Whenever new elements are added to the UI. a 虚拟 DOM is created. Whenever there is a change of state 在 any of these elements, a new 虚拟 DOM 树 is created.

Then this 树 is compared with the previous 虚拟 DOM 树. After all, this is done, the 虚拟 DOM calculates the best possibility to make these changes to the 真实 DOM ensuring that there is the need for minimum operations 上 the 真实 DOM

The comparing process for the 虚拟 DOM 树 is shown 在 the image given below. The changed nodes are depicted by the circles whose UI elements’ state has undergone changes. Now, the current 虚拟 DOM 树 is calculated, the whole parent subtree gets rendered again to produce the updated UI. This 虚拟ly updated 树 is then batch updated to the 真实 DOM.

什么是React?

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

 How does 反应’s 虚拟 DOM work?

After getting a complete idea of what a 虚拟DOM is and how it enhances your apps’ performance, let us have a look 在to how 反应 uses 虚拟 DOM.

The process by which 反应 uses to work with 虚拟 DOM is called “与众不同”。这基本上是一个比较过程,将进一步详细讨论。 反应中的每个UI都被认为是 零件 每个组件都有其位置 唯一状态

反应的基本原则是遵循可观察的模式并寻找任何状态变化。只要任何组件的状态发生变化,React 更新 the 虚拟 DOM 树. After the 虚拟 DOM has been updated, 反应 then 比较 the updated version of the 虚拟 DOM with the older version of the 虚拟 DOM and the process is called “diffing”.

反应 更新 上 ly those objects 在 the 真实 DOM which have been changed 在 the 虚拟 DOM making the app performance much better than it would have been by directly updating it 上 the 真实 DOM thereby making 反应 as a 高性能JavaScript库.

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

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

虚拟 dom

是什么使React如此之快?

 

Whenever anything changes 在 your application it gets view entered to the 虚拟 DOM的表示形式。众所周知,与从JavaScript对象读取或写入DOM相比,读取和写入DOM的速度较慢。虚拟DOM是一个JavaScript对象, 所以反应 never reads from the 真实 DOM. It 在teracts with the 虚拟 DOM and when it sees the change, it goes ahead and 更新 the 真实 DOM very efficiently and that’s what makes 反应非常快.

我们为什么要使用反应?

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

Getting started with 虚拟 DOM:

The 虚拟 DOM is a concept of programming where a 虚拟的表示UI is kept 在 memory and later to be synced with the 真实 DOM 使用 a library such as 反应DOM。这被称为 和解. The 虚拟 DOM solves these problems of frequent 更新 to the DOM 在 a more performant way. Unlike the DOM or the shadow DOM, 虚拟 DOM is a new method of 在terfacing with the DOM 在stead of an official specification.

A 虚拟 DOM is like a 复制 of the 真实 DOM. The 虚拟DOM, unlike the 真实 DOM, can be frequently updated and manipulated, without the help of DOM APIs. Once the 更新 are made to the 虚拟 DOM, we can consider what changes are needed 在 the original DOM and make them 在 an optimized and targeted way.

What does a 虚拟 DOM look like?

名字“virtual DOM” tends to make the concept more mysterious than it actually is. A 虚拟 DOM is rather just a regular Javascript object.

下面给出的是DOM树:

 

html

头lang =”en”

身体

ul class =”list”

li class =”list__item”

“List item”

 

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

const vdom = { tagName: "html", children: [ { tagName: "head" }, { tagName: "身体", children: [ { tagName: "ul", attributes: { "class": "清单" }, children: [ { tagName: "li", attributes: { "class": "项目清单" }, textContent: "项目清单" } // end li ] } // end ul ] } // end 身体 ] } // end html 

We can consider this object as the 虚拟 DOM. Just like the 真实 DOM, it is an object-based representation of our HTML document. As it is just a Javascript object, we can manipulate it frequently without making any changes to the actual DOM until last.

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

const 清单 = { tagName: "ul", attributes: { "class": "清单" }, children: [ { tagName: "li", attributes: { "class": "项目清单" }, textContent: "项目清单" } ] }; 

批量更新:

It is the mechanism by which 反应 更新 the 真实 DOM thereby enhancing the performance. However, 在stead of changing 更新 for every single change 在 the state, the 更新 to the 真实 DOM are sent 在 batches.

结论:

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

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。