24. diel - React Concurrent Mode - Základy
V predchádzajúcej lekcii, Optimalizácia React aplikácií , sme si ukázali stratégie na optimalizáciu React aplikácií, konkrétne sme sa zamerali na code splitting a memoizáciu.
V dnešnom tutoriále pokročilého Reactu si predstavíme Concurrent Mode a vysvetlíme si jeho dôležitosť pre zlepšenie používateľského zážitku.
React Concurrent Mode
React Concurrent Mode bol vyvinutý, aby vyriešil niekoľko kľúčových problémov týkajúcich sa odozvy používateľského rozhrania v komplexných webových aplikáciách. Umožňuje paralelné vykresľovanie podľa prioritizácie, čo pomáha k lepšiemu užívateľskému zážitku. Hlavné vlákno aplikácie totiž nie je blokované menej urgentnými úlohami trvajúcimi dlhšiu dobu a aplikácia má lepšiu odozvu na akcie užívateľa.
Koreňový komponent pre Concurrent Mode
Pred uvedením React Concurrent Mode sa koreňový komponent vytváral
pomocou funkcie ReactDOM.render()
:
V tomto príklade vezme
metóda render()
koreňový komponent <App />
a
vykreslí ju na stránke do HTML elementu s ID root
.
S príchodom React Concurrent Mode bola predstavená nová funkcia
createRoot()
. Použitie tejto funkcie vyzerá takto:
...koniec náhľadu článku...
Pokračuj ďalej
Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.
Kúpiť tento kurz
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.
- Neobmedzený a trvalý prístup k jednotlivým lekciím.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriáli pokročilého Reactu sa zoznámime s Concurrent Mode as tým, v akej situácii ho možno využiť na zlepšenie užívateľského zážitku.
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.