最近，我研究了Facebook的React框架。它使用了一个叫做“虚拟DOM”的概念，我并不真正理解这个概念。
什么是虚拟DOM?它的优点是什么?
当前回答
虚拟DOM(VDOM)并不是一个新概念:https://github.com/Matt-Esch/virtual-dom。
VDOM在战略上更新DOM，而不需要重新绘制单个页面应用程序中的所有节点。在树结构中找到一个节点很容易，但SPA应用程序的DOM树可能非常大。在事件发生时查找和更新一个/多个节点并不省时。
VDOM通过创建实际dom的高级抽象来解决这个问题。VDOM是实际DOM的高级轻量级内存树表示。
例如，考虑在DOM中添加一个节点;在内存中保留一个VDOM副本
创建带有新状态的VDOM 将它与使用差分的旧VDOM进行比较。 只更新真实DOM中的不同节点。 将新的VDOM分配为旧的VDOM。
其他回答
虚拟DOM(VDOM)并不是一个新概念:https://github.com/Matt-Esch/virtual-dom。
VDOM在战略上更新DOM，而不需要重新绘制单个页面应用程序中的所有节点。在树结构中找到一个节点很容易，但SPA应用程序的DOM树可能非常大。在事件发生时查找和更新一个/多个节点并不省时。
VDOM通过创建实际dom的高级抽象来解决这个问题。VDOM是实际DOM的高级轻量级内存树表示。
例如，考虑在DOM中添加一个节点;在内存中保留一个VDOM副本
创建带有新状态的VDOM 将它与使用差分的旧VDOM进行比较。 只更新真实DOM中的不同节点。 将新的VDOM分配为旧的VDOM。
虚拟DOM是HTML 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的前一个版本。
注:1。因此，与普通js不同的是，V-DOM创建了全新版本，R-DOM进行了部分更新。 2. React不会更新状态中的每一个变化，而是批量发送对R-DOM的更新。
所有的答案都很棒。我只是想到了一个比喻，也许可以给一个现实世界的比喻。
真正的DOM就像你的房间，节点是你房间里的家具。虚拟DOM就像我们绘制当前房间的蓝图。
我们都有搬家具的经历，这很累(与在电脑中更新视图相同)。因此，每当我们想要改变位置/添加家具(节点)时，我们只想做非常必要的改变。
蓝图来拯救实现它。我们画了一个新的蓝图，并将其与原蓝图的差异进行比较。这让我们知道哪些部分被改变了，哪些部分保持不变。然后我们对真实的房间进行必要的更改(更新真实DOM上更改的节点)。华友世纪。
(有些人可能会想，为什么我们必须依赖虚拟的DOM，而不直接比较真实的DOM呢?在类比中，比较真实的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的知识
推荐文章
- 向对象数组添加属性
- 如何在Redux应用程序中动态加载代码分割的减速器?
- Angular 2+和debounce
- 检测涡旋方向
- 在react native中隐藏/显示组件
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- console.log()和console.debug()的区别?
- 如何删除和清除所有的本地存储数据
- 如何从给定的html字符串中删除前导和尾随空白?
- 如何为KnockoutJS调试模板绑定错误?
- 将一个二进制的NodeJS Buffer转换为JavaScript的ArrayBuffer
- 检测浏览器标签是否有焦点
- JavaScript在数组中
- 如何从JavaScript中使用正则表达式的字符串中剥离所有标点符号?
- 如何修改标签文本?
