Wat is virtuele DOM?

Onlangs heb ik gekeken naar het React-framework van Facebook. Het gebruikt een concept genaamd “de Virtual DOM”, dat ik niet echt begreep.

Wat is de virtuele DOM? Wat zijn de voordelen?

Antwoord 1, autoriteit 100%

React maakt een boomstructuur van aangepaste objecten die een deel van de DOM vertegenwoordigen. In plaats van bijvoorbeeld een echt DIV-element te maken dat een UL-element bevat, wordt een React.div-object gemaakt dat een React.ul-object bevat. Het kan deze objecten heel snel manipuleren zonder de echte DOM aan te raken of door de DOM API te gaan. Wanneer het vervolgens een component rendert, gebruikt het deze virtuele DOM om erachter te komen wat het met de echte DOM moet doen om de twee bomen op elkaar af te stemmen.

Je kunt de virtuele DOM zien als een blauwdruk. Het bevat alle details die nodig zijn om het DOM te bouwen, maar omdat het niet alle zware onderdelen vereist die in een echt DOM passen, kan het veel gemakkelijker worden gemaakt en gewijzigd.

Antwoord 2, autoriteit 23%

Laten we een voorbeeld nemen, hoewel een heel naïef voorbeeld: als er iets kapot is in een kamer in je huis en je moet het schoonmaken, wat is dan je eerste stap? Ga je je kamer opruimen die in de war is of het hele huis? Het antwoord is zeker dat u alleen de kamer schoonmaakt die schoongemaakt moet worden. Dat is wat de virtuele DOM doet.

Gewone JS doorloopt of rendert de hele DOM in plaats van alleen het deel weer te geven dat moet worden gewijzigd.

Dus wanneer je wijzigingen hebt, zoals in je een andere <div>wilt toevoegen aan je DOM, dan wordt de virtuele DOM gemaakt die eigenlijk geen wijzigingen aanbrengt in de eigenlijke DOM. Met deze virtuele DOM controleer je nu het verschil tussen deze en je huidige DOM. En alleen het deel dat anders is (in dit geval de nieuwe <div>) wordt toegevoegd in plaats van de hele DOM opnieuw te renderen.

Antwoord 3, autoriteit 10%

Wat is de virtuele DOM?

De virtuele DOM is een in-memory weergave van de echte DOM-elementen die worden gegenereerd door React-componenten voordat er wijzigingen op de pagina worden aangebracht.

Het is een stap die plaatsvindt tussen de aangeroepen renderfunctie en het weergeven van elementen op het scherm.

De rendermethode van een component retourneert wat opmaak, maar het is nog niet de definitieve HTML. Het is de in-memory weergave van wat echte elementen zullen worden (dit is stap 1). Vervolgens wordt die uitvoer omgezet in echte HTML, wat wordt weergegeven in de browser (dit is stap 2).

Dus waarom zou je dit allemaal doornemen om een virtuele DOM te genereren?
Eenvoudig antwoord: dit is wat het mogelijk maakt om snel te reageren. Het doet dit door middel van virtuele DOM-diffing. Vergelijk twee virtuele bomen — oud en nieuw — en breng alleen de noodzakelijke wijzigingen aan in de echte DOM.

Bron van Intro To React #2

Antwoord 4, autoriteit 8%

Een virtual DOM(VDOM) is geen nieuw concept: https://github.com/Matt-Esch/virtual-dom.

VDOM is strategisch om DOM bij te werken zonder alle knooppunten opnieuw te tekenen in een applicatie met één pagina. Het vinden van een knooppunt in een boomstructuur is eenvoudig, maar de DOM-boom voor een SPA-app kan enorm groot zijn. Het vinden en bijwerken van een knooppunt/knooppunten in het geval van een gebeurtenis is niet tijdbesparend.

VDOM lost dit probleem op door een abstractie op hoog niveau van werkelijke dom te creëren. De VDOM is een lichtgewicht boomweergave in het geheugen van de werkelijke DOM.

Overweeg bijvoorbeeld om een knooppunt in DOM toe te voegen; reageren bewaar een kopie van VDOM in het geheugen

1. Maak een VDOM met een nieuwe staat
2. Vergelijk het met oudere VDOM met diffing.
3. Update alleen verschillende nodes in echte DOM.
4. Wijs een nieuwe VDOM toe als een oudere VDOM.

Antwoord 5, autoriteit 3%

Dit is een korte beschrijving en herhaling van de Virtual DOM die vaak naast ReactJS wordt genoemd.

Het DOM (Document Object Model) is een abstractie van gestructureerde tekst, wat betekent dat het is gemaakt van HTML-code en css. Deze HTML-elementen worden knooppunten in de DOM. Er zijn beperkingen aan de vorige methoden voor het manipuleren van de DOM. Virtual DOM is een abstractie van de letterlijke HTML DOM die is gemaakt lang voordat React werd gemaakt of gebruikt, maar voor onze doeleinden zullen we het samen met ReactJS gebruiken. De Virtual DOM is lichtgewicht en los van de DOM-implementatie in de browser. De virtuele DOM is in wezen een screenshot (of kopie) van de DOM op een bepaald moment. Een manier om het vanuit een ontwikkelaarsperspectief te bekijken, is dat de DOM de productieomgeving is en de virtuele DOM de lokale (dev)omgeving. Elke keer dat de gegevens in een React-app veranderen, wordt er een nieuwe virtuele DOM-representatie van de gebruikersinterface gemaakt.

De meest elementaire methode die nodig is om een statische component in ReactJS te maken, is:

Je moet code teruggeven van de rendermethode.
Je moet elke klasse naar Classname converteren sinds de les is gereserveerd in JavaScript.
Afgezien van de meer belangrijke veranderingen zijn er kleine verschillen tussen de twee DOM’s, waaronder drie attributen die verschijnen in de virtuele dom, maar niet in de HTML DOM (sleutel, ref en gevaarlijksetinnerhtml).

Een belangrijk ding om te begrijpen bij het werken met de virtuele dom is het verschil tussen reactelement en reactcomponent.

ReactElement

• Een reactelement is een lichte, staatloze, onveranderlijke, virtuele weergave van een DOM-element.
• REACTELLING – Dit is het primaire type in reageer en bevindt zich in de virtuele DOM.

• REACTEMENTEN KUNNEN WORDEN GETOOND IN HTML DOM

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

• JSX Compile HTML-tags in reactielementen

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

reactcomponent

• ReactComponent – ReactComponent’s zijn state-componenten.
• react.createclass wordt beschouwd als een reactcomponent.
• Wanneer de staat verandert, wordt de component gerelderd.

Telkens wanneer een reactcomponent een statusverandering heeft, willen we zo min mogelijk wijzigen in de HTML DOM, dus reactcomponent wordt geconverteerd naar de reactielement die vervolgens op de virtuele DOM kan worden ingebracht, vergeleken en gemakkelijk en eenvoudig wordt bijgewerkt.

Wanneer reageer de diff kent – wordt het geconverteerd naar de low-level (HTML DOM) -code, die wordt uitgevoerd in de DOM.

Antwoord 6, Autoriteit 2%

Het is een nette concept: in plaats van de DOM rechtstreeks te manipuleren, wat foutgevoelig is en vertrouwt op de mutable toestand, voert u in plaats daarvan een waarde uit die de virtuele DOM wordt genoemd. De Virtual Dom is dan Differd met de huidige status van de DOM, die een lijst met DOM-operaties genereert die de huidige dom op de nieuwe lijken. Die operaties worden snel toegepast in een batch.

genomen van

Volgens React-document: https:// reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom

‘In de React-wereld wordt de term ‘virtuele DOM’ meestal geassocieerd met React-elementen, omdat dit de objecten zijn die de gebruikersinterface vertegenwoordigen. ‘

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
       )
   }
}

De Code Inside Return is eigenlijk een oproep om te functioneren react.createeLement:

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

die zoiets retourneert:

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

En dit is virtuele dom. Het is een JavaScript-object dat veel minder kost om te manipuleren dan het eigenlijke DOM-element dat is gemaakt door

document.createElement('button');

Wat ook een JavaScript-object is, ziet er als volgt uit:

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

Je kunt meer leren over virtuele DOM en React op https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/

Antwoord 12

React houdt een lichtgewicht weergave van de echte DOM in het geheugen, en dat staat bekend als de virtuele DOM. Wanneer de status van een object verandert, verandert de virtuele DOM alleen dat object in de echte DOM, in plaats van alle objecten bij te werken.

Antwoord 13

laten we in deze kwestie orde op zaken stellen.
React (of een andere bibliotheek) is een “laag” op javascript.

Er bestaat niet zoiets als een virtuele dom,
er is een niet-bevestigde dom.

Laat het me uitleggen in eenvoudig 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;

op dit punt hebben we een Div gemaakt die niet wordt weergegeven op de dom , omdat het
is niet bijgevoegd

maar we kunnen er toegang toe krijgen, attributen, waarden toevoegen, veranderen enz..

zodra we bellen: (bijvoorbeeld, voeg het toe aan de tekst)

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

dan zullen we het zien;

for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)