2. diel - Vykresľovanie v React a jeho optimalizácia

V predchádzajúcej lekcii, Úvod do ekosystému Reactu , sme si povedali niečo o základoch Reactu a predstavili sme si jeho vybrané knižnice. Ukázali sme si tiež, kde hľadať informácie o dostupných rozšíreniach a podľa čoho ich vyberať.

V nasledujúcom tutoriále pokročilého Reactu sa pozrieme pod pokrievku Reactu, aby sme porozumeli, ako prebieha vykresľovanie. Napíšeme si na to krátku aplikáciu, na ktorej si proces vykresľovania vysvetlíme. Aj keď React je sám o sebe optimalizovaný na rýchle vykresľovanie, existujú techniky, ktoré nám umožnia ešte viac zvýšiť výkon našich aplikácií. V druhej časti tutoriálu sa preto zameriame na tri kľúčové optimalizačné techniky, konkrétne na memoizáciu, lazy loading a virtualizáciu.

Ako funguje vykresľovanie v Reactu

Vykresľovanie v Reactu je založené na koncepte virtuálneho DOM (Document Object Model). Na rozdiel od skutočného DOM, ktorý predstavuje štruktúru webovej stránky v prehliadači, je virtuálny DOM ľahkou, in-memory reprezentáciou skutočného DOM. React udržuje túto virtuálnu reprezentáciu a porovnáva ju s aktuálnym stavom DOM. Kedykoľvek dôjde k zmene v komponente, React túto zmenu najskôr aplikuje na virtuálny DOM, porovná starý a nový virtuálny DOM, a potom efektívne aktualizuje skutočný DOM tým, že upraví len tie časti, ktoré sa skutočne zmenili. Tento prístup pomáha minimalizovať nákladné operácie s DOMom a zvyšuje výkon aplikácie.

Pozrime sa na celý proces bližšie:

• Inicializácia React aplikácie - akonáhle sa aplikácia prvýkrát načíta, React vytvorí virtuálny DOM podľa jej komponentovej hierarchie.
• Renderovanie - v momente, keď sa zmení stav alebo vstupné dáta aplikácie, React vyvolá proces renderovania. Každý komponent v strome sa renderuje do virtuálneho DOM.
• Porovnanie s predchádzajúcim stavom - React porovná nový virtuálny DOM s predchádzajúcim stavom virtuálneho DOM. Tento krok sa nazýva reconciliation (porovnanie).
• Vytvorenie rozdielov (diffing) - React určí rozdiely medzi novým a starým virtuálnym DOM. To sú zmeny, ktoré treba vykonať na skutočnom DOM.
• Aktualizácia skutočného DOM - na základe rozdielov určených v predchádzajúcom kroku vykoná React aktualizáciu na skutočnom DOM.

Tento proces, ako sme si už povedali, umožňuje Reactu rýchlo reagovať na zmeny a minimalizovať zbytočné aktualizácie DOM, čo vedie k lepšiemu výkonu.

Príklad vykresľovania aplikácie

Predstavme si teraz proces vykresľovania na reálnej aplikácii s nasledujúcou komponentovou hierarchiou:

• Akonáhle sa načíta React aplikácie, začne sa vykresľovať koreňový komponent App.
• Komponent App vykreslí svoje detské komponenty: Header, MainComponent a Footer.
• Komponent MainComponent vykreslí aj svoje dieťa MainCompChild.
• Ak dôjde k zmene stavu v komponente MainComponent, React v nej vykoná aktualizáciu stavu.
• React porovná nový virtuálny DOM (po aktualizácii) s predchádzajúcim virtuálnym DOM (po vykreslení).
• React identifikuje rozdiely medzi novým a starým virtuálnym DOM a určí, ktoré časti stránky boli zmenené.
• Nakoniec React aktualizuje skutočný DOM iba pre komponent MainComponent a pre jej dieťa, MainCompChild.

Výsledok potom vyzerá takto:

Aplikácia ukazujúca vykresľovanie v praxi

Teóriu už teda poznáme a je na čase vyskúšať si znalosti v praxi. Spoločne si teda vytvoríme jednoduchú aplikáciu, kde názorne uvidíme, ako vykresľovanie v React funguje.

Založenie projektu

V počítači si vytvoríme zložku pre projekt a otvoríme si ju vo vybranom editore kódu. Otvoríme si terminál a vytvoríme novú React aplikáciu s názvom vykreslovani:

Potom zmeníme adresár na ten s novou aplikáciou (vykreslovani/) a spustíme lokálny server na http://localhost:3000/:

Príprava komponentov

Naša koreňová komponenta je App.js. Kód, ktorý bude obsahovať funkciu App() v súbore App.js, vyzerá takto:

V podobnom duchu teraz vytvoríme ďalšie komponenty zo stromu komponentov. Každý komponent obsahuje nadpis so svojim názvom a tiež console.log s jasným identifikátorom, aby sme potom v konzole mohli sledovať vykresľovanie.

Záhlavie

Vytvoríme súbor Header.js s kódom:

Hlavný komponent

Vytvoríme súbor MainComponent.js s kódom:

Hlavný komponent obsahuje jednoduché počítadlo, ktoré po klikaní na tlačidlo so symbolom plus (+) pripočítava k číslu jednotku. Dosahujeme to pomocou zmeny stavu. Komponente definujeme aj border, nech vizuálne vidíme, že obsahuje aj počítadlo a svoje dieťa.

Do hlavného komponentu sme si už importovali jej dieťa a tiež ho v nej vykresľujeme. Teraz je čas dieťa vytvoriť v projekte.

Dieťa hlavné komponenty

Vytvoríme si súbor MainCompChild.js s kódom:

Pätička

No a na záver si vytvoríme v projekte súbor Footer.js s kódom:

Tým máme všetky potrebné komponenty hotové.

Import do App.js a vykreslenie komponentov

Je teda čas importovať všetky vytvorené komponenty do súboru App.js:

Pod tag <h1> s nadpisom Aplikace potom vykreslíme importované komponenty:

Sledovanie vykresľovania v konzole

Otvoríme si našu aplikáciu v prehliadači, klikneme pravým tlačidlom myši a otvoríme vývojárske nástroje. V nich prejdeme do konzoly. Pokiaľ je v konzole už niečo vypísané, zmažeme ju. Následne obnovíme našu stránku. V konzole sa vypíšu názvy všetkých našich komponentov, pretože sa práve všetky iniciálne vykreslili:

Po kliknutí na tlačidlo Plus sa zmení stav v hlavnom komponente. V konzole hneď vidíme, ako sa opäť vykreslí iba tento hlavný komponent a jej dieťa. To sa opakuje po každom kliknutí na tlačidlo:

Praktickú ukážku teda máme za sebou a môžeme sa pustiť do sľúbených optimalizačných techník.

Techniky optimalizácie vykresľovania

Aj keď React vykonáva vykresľovanie efektívne, existujú situácie, kedy môžeme jeho výkon ešte zlepšiť.

Memoizácia

Pomocou memoizácie dokážeme uchovávať v pamäti výsledky skorších výpočtov, čím sa vyhneme opakovanému výpočtu rovnakých hodnôt. To je užitočné najmä v komponentoch, ktoré obsahujú náročné výpočty. Jednou z najbežnejších techník memoizácie v JavaScripte je použitie tzv. memoizačných knižníc, ako je napríklad memo z Reactu, alebo knižnica lodash.memoize.

V Reactu možno memo použiť pomocou hooku useMemo(). Hook prijíma dve hlavné veci: funkciu a pole závislých hodnôt. Funkcia, ktorú odovzdáme useMemo(), potom vykonáva výpočet alebo operáciu, ktorú chceme memoizovať. Pole závislých hodnôt potom obsahuje všetky hodnoty, ktoré sú relevantné pre výpočet. Ak sa niektorá z týchto hodnôt zmení, useMemo() znovu vykoná výpočet.

Hook vracia memoizovaný výsledok výpočtu. Tento výsledok sa nezmení, pokiaľ sa nezmenia závislé hodnoty, čo umožňuje zabrániť zbytočnému vykonávaniu výpočtov pri každom renderovaní komponentu.

Zatiaľ čo hooky ako useMemo() sa používajú vo funkcionálnych komponentoch, pokiaľ pracujeme s projektom, ktorý má triedne komponenty, je možné pre memoizáciu použiť nástroje ako shouldComponentUpdate alebo PureComponent.

Lazy loading

Lazy loading umožňuje načítať komponenty až vtedy, keď sú potrebné. Tým dokážeme zrýchliť počiatočné načítanie aplikácie.

Jedným z najbežnejších prípadov použitia lazy loading je lenivé načítanie obrázkov. Namiesto toho, aby sa všetky obrázky stiahli naraz, sú obrázky sťahované až vtedy, keď sú viditeľné na obrazovke. Lazy loading sa používa aj pre code splitting. To znamená, že časti kódu sa načítajú až vtedy, keď sú potrebné. Aj týmto spôsobom je možné zlepšiť výkon aplikácie, a to znížením objemu kódu, ktorý sa musí stiahnuť pri prvom načítaní stránky.

Virtualizácia

Virtualizácia umožňuje efektívne zobrazovať a spravovať veľké zoznamy dát na webových stránkach. Namiesto toho, aby bola vytvorená a vykreslená každá položka zoznamu, ako je to v klasickom prístupe, virtualizácia načíta a vykresľuje iba viditeľné položky. To zvyšuje výkon a znižuje pamäťovú záťaž. Virtualizácia sa obvykle využíva práve v kombinácii s lazy loadingom, kde sa položky zoznamu načítajú až vtedy, keď sú potrebné (napríklad pri posune nadol alebo nahor).

So všetkými spomínanými technikami sa v priebehu kurzu detailne zoznámime.

V nasledujúcej lekcii, Serverové renderovanie druhýkrát - Štýlovanie v Tailwind CSS , dokončíme tému serverového renderovania a našu aplikáciu nastylujeme pomocou Tailwind CSS.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.