什么是虚拟DOM?

2020/11/12 12:22 · javascript ·  · 0评论

最近,我查看了Facebook的React框架。它使用了一个我不十分了解的概念,即“虚拟DOM”。

什么是虚拟DOM?有什么优势?

React创建了代表DOM一​​部分的自定义对象树。例如,它不是创建包含UL元素的实际DIV元素,而是创建包含React.ul对象的React.div对象。它可以非常快速地操作这些对象,而无需实际接触真正的DOM或通过DOM API。然后,当它呈现组件时,它使用此虚拟DOM找出需要与真实DOM做什么才能使两棵树匹配。

您可以将虚拟DOM视为一个蓝图。它包含构造DOM所需的所有细节,但是由于它不需要进入真正DOM的所有重量级部件,因此可以更轻松地创建和更改它。

让我们举个例子-一个非常幼稚的例子:如果您家里的房间里有东西弄乱了,需要打扫一下,那么第一步是什么呢?您会打扫房间还是整间房子?肯定的答案是,您将只打扫需要打扫的房间。这就是虚拟DOM所做的。

普通的JS遍历或渲染整个DOM,而不是仅渲染需要更改的部分。

因此,无论何时进行任何更改(例如要向<div>DOM中添加其他更改),都会创建虚拟DOM,而该虚拟DOM实际上不会对实际DOM进行任何更改。现在,使用此虚拟DOM,您将检查此虚拟DOM与当前DOM之间的区别。并且仅添加不同的部分(在本例中为new <div>),而不是重新渲染整个DOM。

什么是虚拟DOM?

虚拟DOM是对页面进行任何更改之前React组件生成的实际DOM元素的内存表示。

在此处输入图片说明

这是在调用渲染函数和在屏幕上显示元素之间发生的一步。

组件的render方法返回一些标记,但它不是最终的HTML。这是将成为真实元素的内存表示形式(这是步骤1)。然后,该输出将转换为真实的HTML,即在浏览器中显示的内容(这是第2步)。

那么,为什么要经历所有这些以生成虚拟DOM?简单的答案-这就是使反应迅速的原因。它通过虚拟DOM差异来做到这一点。比较两个旧的和新的虚拟树,并仅对真实的DOM进行必要的更改。

来自Intro To React#2

一个virtual DOM(虚拟域)是不是一个新概念:https://github.com/Matt-Esch/virtual-dom

VDOM从战略上讲是在不重绘单个页面应用程序中所有节点的情况下更新DOM的。在树形结构中找到节点很容易,但是SPA应用程序的DOM树可能非常庞大。在发生事件的情况下查找和更新一个或多个节点不是很节省时间。

VDOM通过创建实际dom的高级抽象来解决此问题。VDOM是实际DOM的高级轻量级内存树表示。

例如,考虑在DOM中添加节点;反应在内存中保留VDOM的副本

  1. 创建具有新状态的VDOM
  2. 使用比较将其与较旧的VDOM进行比较。
  3. 仅更新真实DOM中的不同节点。
  4. 将新的VDOM分配为旧的VDOM。

这是对React JS经常提到的Virtual DOM的简短描述和重申。

DOM(文档对象模型)是结构化文本的抽象,这意味着它由HTML代码和CSS组成。这些HTML元素成为DOM中的节点。以前的操作DOM的方法存在局限性。虚拟DOM是在创建或使用React之前就创建的文字HTML DOM的抽象,但是出于我们的目的,我们将其与ReactJS一起使用。虚拟DOM是轻量级的,并且与浏览器中的DOM实现分离。虚拟DOM本质上是给定时间的DOM的屏幕快照(或副本)。从开发人员的角度来看,DOM是生产环境,而Virtual DOM是本地(开发)环境。每当React应用程序中的数据发生变化时,都会创建一个新的用户界面虚拟DOM表示。

在ReactJS中创建静态组件所需的最基本方法是:

您必须从render方法返回代码。您必须将每个类都转换为className,因为class是JavaScript中的保留字。除了较大的更改外,两个DOM之间还存在细微差别,其中包括出现在虚拟DOM中但不出现在HTML DOM中的三个属性(键,ref和dragonallySetInnerHTML)。

使用虚拟DOM时要了解的重要一点是ReactElement和ReactComponent之间的区别。

ReactElement

  • ReactElement是DOM元素的轻量,无状态,不可变的虚拟表示。
  • ReactElement-这是React中的主要类型,位于Virtual DOM中。
  • 可以将ReactElement渲染为HTML DOM

    var root = React.createElement('div');
    ReactDOM.render(root, document.getElementById('example'));

  • JSX将HTML标记编译为ReactElements

    var root = <div/>;
    ReactDOM.render(root, document.getElementById('example'));

ReactComponent

  • ReactComponent-ReactComponent是有状态的组件。
  • React.createClass被认为是一个ReactComponent。
  • 每当状态更改时,都会重新渲染组件。

每当ReactComponent发生状态更改时,我们都希望对HTML DOM进行尽可能少的更改,以便将ReactComponent转换为ReactElement,然后可以将其插入到Virtual DOM中,进行比较和轻松快速地进行比较和更新。

当React知道diff时,它会转换为在DOM中执行的低级(HTML DOM)代码。

这是一个很好的概念:与其直接操作DOM(它容易出错,而且依赖于可变状态),而不是直接操作DOM,而是输出一个称为Virtual DOM的值。虚拟DOM,然后显示差异与DOM,它产生的DOM操作,这将使当前的DOM看起来像新的列表的当前状态。这些操作可以快速批量应用。

这里拍摄

虚拟DOM是HTML DOM的抽象,它根据状态变化选择性地呈现节点的子树。它会进行最少的DOM操作,以使组件保持最新状态。

虚拟Dom被创建为Dom的一个副本。将虚拟domdom进行比较,虚拟dom仅更新dom中已更改的部分。它并没有渲染整个dom,而只是更改了dom in dom中的更新部分。这非常耗时,而且通过此功能,我们的应用可以快速运行。

所有的答案都很好。我只是想出了一个比喻,它可能会给出一个现实世界的隐喻。

真正的DOM就像您的房间,节点就是房间中的家具。虚拟DOM就像我们绘制当前房间的蓝图。

我们都有移动家具的经验,这非常累人(与更新计算机视图相同的概念)。因此,每当我们要更改位置/添加家具(节点)时,我们只想做非常必要的更改。

蓝图是为了实现这一目标而进行的救援。我们绘制了一个新的蓝图,并将其与原始蓝图进行比较。这使我们知道哪些部分已更改,哪些部分保持不变。然后,我们对实际房间进行必要的更改(更新真实DOM上已更改的节点)。欢呼。

(有些人可能会认为,为什么我们必须依赖虚拟环境而不直接比较真实的DOM?嗯,以此类推,比较真实的DOM意味着您必须创建另一个真实的房间并将其与原始房间进行比较。 (太贵了。)

React的结构单元是组件。每个组件都有一个状态。每当组件状态改变时,React都会修改V-DOM树。此后,将V-DOM的最新版本与V-DOM的先前版本进行比较。经过此计算(比较)后,当React知道哪些V-DOM对象已更改时,它仅修改R-DOM中的那些对象。

用外行的话来说

假设我在DOM中添加了一个div元素,React在不更改整个R-DOM的情况下创建了V-DOM的副本。将此新创建的V-DOM与旧的V-DOM进行比较。它仅更新实际DOM中的不同节点。现在,新创建的V-DOM被视为即将推出的V-DOM的先前版本。

PS 1.因此与普通js不同,创建了V-DOM的全新版本,并部分更新了R-DOM。2. React不会更新状态的每一个变化,而是对R-DOM的更新是成批发送的。

根据React doc:https : //reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom

“在React世界中,术语“虚拟DOM”通常与React元素相关联,因为它们是代表用户界面的对象。'

import React, { Component } from 'react'; //You need to do this inside a module to import

class App extends Component{
   render(){
       return (
       <button>Hi</button> //This returns a virtual DOM
       )
   }
}

return中的代码实际上是对函数React.createElement的调用:

//render can be rewritten like this:
render(){
   return [
            React.createElement(
                'button',
                {
                    key: null,
                    ref: null,           
                },
                'Hi',
            )
   ]
}

返回如下内容:

{
  $$typeof: Symbol.for('react.element'), 
  type: "button", 
  key: null, 
  ref: null, 
  props: { 
     children: 'Hi',
  }
}

这是虚拟DOM。这是一个JavaScript对象,其操作成本比由创建的实际DOM元素少得多

document.createElement('button');

这也是一个JavaScript对象,如下所示:

accessKey: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {length: 0}
autocapitalize: ""
autofocus: false
baseURI: "http://localhost:3000/"
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
disabled: false
draggable: false
elementTiming: ""
enterKeyHint: ""
firstChild: null
firstElementChild: null
form: null
formAction: "http://localhost:3000/"
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
hidden: false
id: ""
innerHTML: ""
innerText: ""
inputMode: ""
isConnected: false
isContentEditable: false
labels: NodeList []
lang: ""
lastChild: null
lastElementChild: null
localName: "button"
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "BUTTON"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onbeforexrselect: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerrawupdate: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitionend: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkittransitionend: null
onwheel: null
outerHTML: "<button></button>"
outerText: ""
ownerDocument: document
parentElement: null
parentNode: null
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: 0
tagName: "BUTTON"
textContent: ""
title: ""
translate: true
type: "submit"
validationMessage: ""
validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
value: ""
willValidate: true

您可以在https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/中了解有关虚拟DOM和React的更多信息。

让我们在这件事上做个有条理的事情。React(或任何其他库)是javascript上的“层”。

没有虚拟dom之类的东西,没有独立的dom。

让我用简单的javascript进行解释:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

至此,我们创建了一个div,该div并未显示在dom上,因为它尚未连接

但是我们可以访问它,添加属性,值,更改等。

一旦我们调用:(例如,将其添加到正文)

    document.body.appendChild(vDom['newDiv'])

然后我们将看到它;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)
本文地址:http://javascript.askforanswer.com/shenmeshixunidom.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!