javascript - Co je to Virtual DOM?

Nedávno jsem se podíval na Facebookův framework React. Používá koncept nazývaný "virtuální DOM", kterému jsem moc nerozuměl.

Co je to virtuální DOM? Jaké jsou jeho výhody?

Odpověď č. 1

React vytváří strom vlastních objektů, které představují část DOM. Například místo toho, aby vytvořil skutečný prvek DIV obsahující prvek UL, vytvoří objekt React.div, který obsahuje objekt React.ul. Tyto objekty může velmi rychle manipulovat, aniž by se skutečně dotýkal reálného DOM nebo procházel DOM API. Poté, když vykresluje komponentu, používá tento virtuální DOM, aby zjistil, co je potřeba udělat se skutečným DOM, aby se oba stromy shodovaly.

Můžete si představit virtuální DOM jako plánek. Obsahuje všechny podrobnosti potřebné pro sestavení DOM, ale protože nevyžaduje všechny náročné součásti, které jsou součástí skutečného DOM, může být vytvořen a měněn mnohem snadněji.

Odpověď č. 2

Vezměme si příklad — ačkoli velmi naivní: Pokud máte něco rozházeného v místnosti ve vašem domě a potřebujete to uklidit, jaký bude váš první krok? Budete uklízet celou místnost, která je rozházená, nebo celý dům? Odpověď je jednoznačně, že budete uklízet pouze místnost, která potřebuje úklid. To je přesně to, co dělá virtuální DOM.

Běžný JS prochází nebo vykresluje celý DOM místo toho, aby vykresloval pouze tu část, která vyžaduje změny.

Takže kdykoli budete mít nějaké změny, například pokud chcete do svého DOM přidat další <div>, bude vytvořen virtuální DOM, který ve skutečnosti nedělá žádné změny v aktuálním DOM. Nyní s tímto virtuálním DOM budete zjišťovat rozdíl mezi tímto a vaším aktuálním DOM. A pouze část, která je odlišná (v tomto případě nový <div>), bude přidána místo opětovného renderování celého DOM.

Odpověď č. 3

Virtuální DOM (VDOM) není nový koncept: https://github.com/Matt-Esch/virtual-dom.

VDOM je strategicky navržen tak, aby aktualizoval DOM, aniž by překresloval všechny uzly v aplikaci jediné stránky. Nalezení uzlu v stromové struktuře je snadné, ale DOM strom pro SPA aplikaci může být drasticky obrovský. Nalezení a aktualizace uzlu/uzlů v případě události není časově efektivní.

VDOM řeší tento problém vytvořením vysoce úrovňové abstrakce skutečného DOM. VDOM je vysoce úrovňová lehká reprezentace stromu v paměti skutečného DOM.

Například zvažte přidání uzlu do DOM; React uchovává kopii VDOM v paměti

Vytvořte VDOM s novým stavem
Porovnejte to se starším VDOM pomocí diferencování.
Aktualizujte pouze odlišné uzly v reálném DOMu.
Přiřaďte nový VDOM jako starší VDOM.

Odpověď č. 4

Virtuální DOM je v paměti uložená reprezentace skutečných DOM prvků generovaných komponentami React před tím, než jsou na stránce provedeny jakékoli změny.
Je to krok, který probíhá mezi zavoláním vykreslovací funkce a zobrazením prvků na obrazovce.
Metoda render komponenty vrací nějaký markup, ale ještě to není finální HTML. Je to v paměti uložená reprezentace toho, co se stane skutečnými prvky (to je krok 1). Poté bude tento výstup převeden na skutečné HTML, které se zobrazí v prohlížeči (to je krok 2).
Tak proč procházet vším tímto, abychom vygenerovali virtuální DOM? Jednoduchá odpověď — To je to, co umožňuje Reactu být rychlý. Dělá to prostřednictvím porovnávání virtuálního DOM. Porovnává dva virtuální stromy — starý a nový — a provádí pouze nezbytné změny do skutečného DOM.

Zdroj z mého blogu Úvod do React #2

Odpověď č. 5

Všechny odpovědi jsou skvělé. Právě mě napadla analogie, která pravděpodobně může poskytnout metaforu ze skutečného světa.

Skutečný DOM je jako váš pokoj, uzly jsou nábytek ve vašem pokoji. Virtuální DOM je jako kdybychom nakreslili plán tohoto aktuálního pokoje.

Všichni máme zkušenost s přesouváním nábytku, je to velmi únavné (stejný koncept jako aktualizace pohledů v počítačích). Proto kdykoli chceme změnit polohu/přidat nábytek (uzly), chceme provést pouze nezbytnou změnu.

Blueprint přišel na pomoc, aby to dosáhl. Nakreslíme nový plán a porovnáme rozdíl s tím původním. To nám umožní zjistit, která část byla změněna a která zůstává stejná. Poté provedeme potřebnou změnu v reálné místnosti (aktualizujeme změněné uzly v reálném DOM). Hurá.