javascript - Vad är Virtual DOM?

Nyligen tittade jag på Facebooks React-ramverk. Det använder ett koncept som kallas "den virtuella DOM:en," vilket jag egentligen inte förstod.

Vad är det virtuella DOM? Vilka är fördelarna?

Svar #1

React skapar ett träd av anpassade objekt som representerar en del av DOM. Till exempel, istället för att skapa ett faktiskt DIV-element som innehåller ett UL-element, skapar det ett React.div-objekt som innehåller ett React.ul-objekt. Det kan manipulera dessa objekt mycket snabbt utan att faktiskt röra vid det riktiga DOM eller gå igenom DOM API. Sedan, när det renderar en komponent, använder det detta virtuella DOM för att ta reda på vad det behöver göra med det riktiga DOM för att få de två träden att matcha.

Du kan tänka på den virtuella DOM som en ritning. Den innehåller alla detaljer som behövs för att konstruera DOM, men eftersom den inte kräver alla tunga delar som ingår i en riktig DOM, kan den skapas och ändras mycket lättare.

Svar #2

Låt oss ta ett exempel — även om det är ett väldigt naivt ett: Om du har något som är stökigt i ett rum i ditt hem och du behöver städa det, vad kommer ditt första steg att vara? Kommer du att städa ditt rum som är stökigt eller hela huset? Svaret är definitivt att du bara kommer att städa det rum som kräver städning. Det är vad den virtuella DOM gör.

Vanlig JS traverserar eller renderar hela DOM istället för att endast rendera den del som kräver ändringar.

Så när du har några förändringar, som att du vill lägga till en annan <div> i din DOM, kommer den virtuella DOM att skapas, vilket egentligen inte gör några förändringar i den faktiska DOM. Nu med denna virtuella DOM kommer du att kontrollera skillnaden mellan denna och din nuvarande DOM. Och endast den del som är olika (i detta fall den nya <div>) kommer att läggas till istället för att rendera om hela DOM.

Svar #3

En virtuell DOM (VDOM) är inte ett nytt koncept: https://github.com/Matt-Esch/virtual-dom.

VDOM är strategiskt för att uppdatera DOM utan att rita om alla noder i en single page-applikation. Att hitta en nod i en trädstruktur är enkelt, men DOM-trädet för en SPA-applikation kan vara drastiskt stort. Att hitta och uppdatera en nod/noder vid ett händelsefall är inte tids effektivt.

VDOM löser detta problem genom att skapa en hög nivå abstraktion av den faktiska DOM. VDOM är en hög nivå lättviktig representation i minnet av den faktiska DOM.

Till exempel, tänk på att lägga till en nod i DOM; React behåller en kopia av VDOM i minnet

Skapa en VDOM med ett nytt tillstånd
Jämför det med äldre VDOM genom att använda diffning.
Uppdatera bara olika noder i den verkliga DOM.
Tilldela ny VDOM som en äldre VDOM.

Svar #4

Den virtuella DOM är en minnesbaserad representation av de verkliga DOM-elementen som genereras av React-komponenter innan några ändringar görs på sidan.
Det är ett steg som sker mellan att render-funktionen anropas och visningen av elementen på skärmen.
En komponentens renderingsmetod returnerar viss markup, men det är inte den slutliga HTML:en än. Det är den i-minnet-representation av vad som kommer att bli riktiga element (detta är steg 1). Sedan kommer den utdata att omvandlas till riktig HTML, vilket är det som visas i webbläsaren (detta är steg 2).
Så varför gå igenom allt detta för att generera en virtuell DOM? Enkelt svar — Detta är vad som gör att React kan vara snabb. Det gör detta genom virtuell DOM-diffning. Jämföra två virtuella träd — gamla och nya — och göra endast de nödvändiga ändringarna i den riktiga DOM:en.

Källa från min blogg Introduktion till React #2

Svar #5

Alla svaren är bra. Jag kom precis på en liknelse som förmodligen kan ge en metafor från den verkliga världen.

Den riktiga DOM är som ditt rum, noderna är möblerna i ditt rum. Den virtuella DOM är som om vi ritar en blåkopi av detta nuvarande rum.

Vi har alla erfarenheten av att flytta möbler, det är väldigt tröttsamt (Samma koncept som att uppdatera vyer i datorer). Därför, varje gång vi vill ändra position/lägga till möbler (noder), vill vi bara göra den absolut nödvändiga förändringen.

Blueprint kom till undsättning för att uppnå det. Vi ritar en ny planritning och jämför skillnaden med den ursprungliga. Detta låter oss veta vilken del som har ändrats och vilken del som förblir densamma. Vi gör sedan den nödvändiga ändringen i det verkliga rummet (uppdaterar de ändrade noderna på den verkliga DOM). Hurra.