ReactJS Virtuální DOM a usmíření - Vysvětlete, jako bych měl pět

Co je DOM?

DOM je zkratka pro Document Object Model. HTML je jazyk webových stránek. Poskytuje struktuře webových stránek mnoho specializovaných značek, včetně způsobu propojení více stránek dohromady. Struktura webové stránky je reprezentována jako stromová struktura document object . Programovací jazyk JavaScript může změnit strukturu tohoto objektu dokumentu a vnést na webové stránky dynamické chování.

DOM (Document Object Model) je programovací rozhraní pro dokumenty webové stránky se stromovou strukturou. Strom dokumentu se nazývá DOM Tree .

Pojďme to pochopit na jednoduchém příkladu. Zde je fragment kódu HTML, jehož cílem je zobrazit název webové stránky a některé informace v těle stránky.

Pokud si výše uvedený úryvek kódu představíme jako strom dokumentu, bude vypadat takto. Každý z prvků HTML představuje node ve stromě.

Když se vykresluje na webové stránce, můžeme vidět informace jako je tato,

Nyní, pokud musíme změnit text odstavce (<p> tag), budeme potřebovat schopnost najít <p> tag ze stromu dokumentu a poté mu nastavte novou textovou hodnotu. To vše musíme udělat pomocí JavaScript DOM API.

const paragraph = document.querySelector("p");
paragraph.innerText = 'Some other text!';

Mechanismus hledání konkrétního uzlu ve stromu dokumentu se nazývá Querying the DOM . Přidání nového uzlu, odstranění uzlu nebo aktualizace uzlu ve stromu dokumentu se nazývá DOM Manipulation . Výsledek manipulace DOM se odráží na webovém uživatelském rozhraní. Tento proces se nazývá rendering .

Manipulace s DOM je nákladná

Častá aktualizace na DOM je nákladný. Může to snížit výkon webové stránky a zpomalit ji. Protože je DOM reprezentován stromovou strukturou, dotazování a aktualizace jsou obvykle rychlejší než vykreslování. Může to však být také nákladné, pokud musíme procházet velkou část stromu DOM, abychom našli uzel, který se má aktualizovat.

Podívejme se na tabulku zaměstnanců níže, která ukazuje jméno zaměstnance a zda je zaměstnanec ženatý.

Pokud musíme pokaždé procházet reprezentaci stromu dokumentů této tabulky, abychom provedli aktualizaci, pak bude manipulace s DOM nákladná.

Virtuální DOM a usmíření v ReactJS

ReactJS je declarative . To znamená, že ReactJS abstrakty mohou provádět operace na nízké úrovni, jako je manipulace s DOM od vývojářů. Díky tomu se ReactJS také ujistí, že věnuje zvýšenou pozornost řešení možných problémů s výkonem kvůli časté manipulaci a vykreslování DOM.

ReactJS nikdy neaktualizuje original DOM přímo (pokud to případ použití vývojáře nevyžaduje). V ReactJS bude pro každý objekt DOM vytvořena odpovídající kopie v paměti. Tato kopie se nazývá Virtual DOM (VDOM).

V Virtual DOM strom, každý prvek je reprezentován uzlem. Vždy, když se změní stav prvku, bude vytvořen nový strom virtuálního DOM. Rozdílový algoritmus ReactJS porovná aktuální strom virtuálního DOM s jeho předchozí verzí. Nakonec virtuální DOM používá algoritmus k aktualizaci skutečného DOM pomocí rozdílu.

Animovaný obrázek níže vysvětluje, jak se vytváří virtuální DOM jako kopie původního DOM a jak dochází k rozdílům a aktualizaci.

Pokud nevidíte animovaný obrázek výše, klikněte na tento odkaz

  • Nejprve ReactJS vytvoří kopii původního DOM a nazve ho Virtual DOM. Každý z uzlů virtuálního DOM představuje prvek.
  • Pokud dojde k aktualizaci stavu prvku, vytvoří se nový virtuální DOM.
  • Algoritmus rozdílu identifikuje rozdíl změny. V tomto případě byl jako rozdíl identifikován podstrom ze změněného uzlu.
  • Nakonec ReactJS spustí dávkovou aktualizaci, aby aktualizoval původní DOM těmito změnami, aby byl synchronizován.

Mechanismus pro porovnání jednoho stromu s druhým, aby se určilo, které části je třeba změnit, a poté se pomocí něj aktualizuje původní DOM, se nazývá Reconciliation . O Smíření se můžete dozvědět zde. ReactJS používá nový modul pro odsouhlasení nazvaný Fiber od verze 16.0. Více o architektuře React Fiber Architecture si můžete přečíst zde.

A je to. Doufám, že vám vysvětlení virtuálního DOM a usmíření pro začátečníky pomohlo.

Závěr

Jako začátečník na ReactJS , nemusíte vědět, jak funguje virtuální DOM, jak dochází k rozdílům, co je to dávková aktualizace atd. Ale pokud vás zajímá, jak se ReactJS stará o výkon aplikace a další koncepty, jako je zapamatování, musíte utratit nějaký čas pochopit koncept virtuálního DOM a vykreslování.

Také, ať se vám to líbí nebo ne, může být virtuální DOM a rendering vzrušujícím tématem pro vašeho tazatele 😉! Takže je lepší si to uvědomit.

Pokud se chcete dozvědět více o aktualizacích Virtual DOM, Reconciliation, Diffing a Batch update z výukového videa, podívejte se prosím na toto,

https://www.youtube.com/watch?v=rysTbzKOEO0

Než skončíme...

Sdílím své znalosti na,

  • 🌐 Vývoj webu (JavaScript, ReactJS, Next.js, Node.js, atd...)
  • 🛡️ Webová bezpečnost
  • 💼 Kariérní rozvoj
  • 🌱 Opensource
  • ✍️Vytváření obsahu

Pojďme se připojit,

  • Dejte sledovat na Twitteru
  • Přihlaste se k odběru mého kanálu YouTube
  • Vedlejší projekty na GitHubu
  • Komunita Showwcase React