Being Reactive – Použití virtuálního DOM a DOM Diffing

Už je to nějaký čas, co se snažím uvědomit si podstatu reaktivního programování . Počínaje implementací v Angular a RxJS, později s ReactJs a půl roku zpět s Vuejs jsem byl ve stavu, abych se více přehraboval a dozvěděl se něco nového o konceptu.

Toto je první příspěvek ze série, který vysvětluje mou cestu k reaktivnímu programování, virtuálnímu domu a skvělé nové nabídce, která velkým způsobem změnila perspektivu! Zůstaňte naladěni.

Jak to všechno začalo

Můj první pokus byl dozvědět se o reaktivním programování z Wikipedie a řekl jsem si,

Obrázek s laskavým svolením:GIPHY.com

Postupem času jsem se seznámil s mnoha definicemi a vysvětleními. Zde je několik, kterým jsem rozuměl a mohl bych se k nim připojit:

Tvrdý? Zkuste tohle.

Jednoduchý? Zde je ten nejrozumnější:

Příklad reakce

Zde je jednoduchý příklad, jak je vaše aplikace reaktivní :

Takže, co se tady děje?

  • Bylo definováno počítadlo. Vy jako programátor jste definovali dynamické chování hodnoty čítače v době deklarace.
  • Kliknete na tlačítko a počítadlo se chová tak, jak bylo deklarováno jako reaktivní. Jak se hodnota mění, aplikace reaguje (Zobrazuje zvýšený počet a uvozovky).
  • O aktualizaci stavu aplikace se musí postarat Framework nebo knihovna (ReactJs, Vue atd.), kterou používáte k vývoji. Použití Virtual DOM a koncept DOM Diffing je zde klíč.

Virtuální DOM

Tradičně Framework / Library jako React nebo Vue vám umožňuje psát deklarativní státem řízený kód, ale stojí to za to. Prohlížeč potřebuje udělat spoustu práce navíc, aby převedl tyto deklarativní struktury na operace DOM. Technika, která se k tomu používá, se nazývá Virtual DOM Diffing .

V mnoha frameworkech vytváříte své aplikace pomocí speciálního render() funkce. Vezměme si příklad základní komponenty Reactu, kódu uvnitř render() funkce:

function GreetingMessage(props) {
  return (
    <div className="greeting">
      {props.greeting}
    </div>
  );
}

Pokaždé, když se stav vaší aplikace aktualizuje (například když se změní rekvizita pozdravu), vytvoříte nový virtuální DOM . Rámec sladí nový se starým, aby zjistil, jaké změny jsou nutné, a aplikuje je na skutečný DOM. Toto sladění virtuálního DOM porovnáním každého z uzlů, atributů a hodnot se nazývá Virtuální DOM Diffing .

Celkový cyklus vypadá takto:

Porovnání virtuálních DOM je nákladné

Změny na skutečném DOM nemůžete použít, aniž byste nejprve porovnali nový virtuální DOM s předchozím a odsouhlasení je povinné. Pojďme si projít GreetingMessage výše uvedený příklad:

Předpokládejme greeting prop změněno z Hello, How are you?Hola como estas .

  1. Porovnání snímků DOM (starého i nového) začíná v rámci. V obou horních div uzel je vidět beze změny. Rámec si tedy může ponechat stejnou hodnotu div uzel.
  2. Rozhraní prochází všemi atributy starého div a nový, abyste zjistili, zda je třeba něco přidat/odebrat/upravit. V našem příkladu máme v obou případech jediný atribut, className s hodnotou "pozdrav". Proto zatím žádná změna na DOM.
  3. Teď, když vidí prvek dole, zjistil, že se text změnil, takže skutečný DOM je třeba nyní aktualizovat.

Pokud si všimnete, že struktura DOM zůstává stejná, porovnávání pokračuje až do kroku 3, kde byla nalezena změna textu. To je drahé a stojí to aplikaci nejvíce, když se toto srovnání provádí za běhu prohlížeče. Uživatel naší aplikace může zaplatit pokutu za tyto náklady na základě povahy a implementace aplikace. Není to důvod k obavám?

Ujišťuji vás, že nevybírám žádný rámec/knihovnu jako Reactjs ani žádnou jinou, která poskytuje mechanismus Virtual DOM výpočet. Tyto rámce jsou rychlé pro správu cyklu aktualizace DOM. Ale není v rozsahu těchto rámců zastavit programátory v psaní špatného kódu. Například špatný kód v reakci může způsobit render() metoda, aby se zbytečně volalo vícekrát. Pokud je kód méně zabugovaný, můžeme využít potenciál Virtual DOM mnohem lepší způsob.

Ale je toho víc!

Jak bylo napsáno na začátku, toto je první příspěvek ze série. Zůstaňte naladěni a získejte další.

Snad se vám začátek líbil. Sledujte mě, abyste si mohli přečíst mé budoucí články.