Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

7. diel - Hooky v React - useContext() a useReducer()

V predchádzajúcej lekcii, Hooky v React - useCallback() a useMemo() , sme si predstavili hooky useCallback() a useMemo() a ukázali sme si ich využitie v praxi spoločne s funkciou memo().

V nasledujúcom tutoriále pokročilého Reactu si predstavíme hooky useContext() a useReducer(). Zameriame sa na ich spoločné použitie. Toto spojenie je výhodné, pretože poskytuje efektívny a udržateľný spôsob správy globálneho stavu a logiky aplikácie bez nutnosti prop drillingu alebo zložitého stavového manažmentu.

Prop drilling je termín používaný na opis procesu, kedy sa dáta odovzdávajú ako props cez niekoľko úrovní vnorených komponentov, aby dosiahli tie, ktoré ich skutočne potrebujú. Tento proces je často neefektívny a spôsobuje zbytočnú zložitosť aplikácie, najmä keď sa dáta musia odovzdať cez mnoho úrovní komponentov.

Hook useContext()

Hook useContext() umožňuje komponentu pristupovať k hodnotám kontextu, ktoré sú poskytnuté vyššie v komponentovom strome. V praxi to znamená, že nemusíme hodnoty alebo funkcie používané na mnohých miestach aplikácie posúvať cez niekoľko komponentov pomocou props, aby nedošlo k prop drillingu. Namiesto toho ich zdieľame cez kontext.

Najskôr musíme kontext vytvoriť a uložiť do premennej:

Keby sme do zátvorky funkcie createContext() uviedli nejakú hodnotu, bude braná za východiskovú iba v prípade, že v kontexte vyššie v strome komponentov nie je zodpovedajúca hodnota poskytnutá.

Potom obalíme komponent, v ktorom chceme kontext využiť, takzvaným providerom:


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár korún

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

Kúpiť všetky aktuálne dostupné lekcie s funkciou odovzdávanie úloh iba za 600 kreditov
Aktuálny stav konta 0 kreditov
Kúpou tohoto balíčku získaš prístup ku všetkým 30 článkom (30 lekcií) tohoto kurzu.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • 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ále pokročilého Reactu si predstavíme hooky useContext() a useReducer() a ich praktické využitie na príklade jednoduchého počítadla.

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ť.

Článok pre vás napísala Laura Baluchová
Avatar
Aktivity