NOVINKA - Vstup do světa AI s ONLINE víkendovým kurzem Práce s umělou inteligencí od A do Z. Přihlas se ještě dnes!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.

Lekce 7 - Hooky v Reactu - useContext() a useReducer()

V předchozí lekci, Hooky v Reactu - useCallback() a useMemo(), jsme si představili hooky useCallback() a useMemo() a ukázali jsme si jejich využití v praxi společně s funkcí memo().

V následujícím tutoriálu pokročilého Reactu si představíme hooky useContext() a useReducer(). Zaměříme se na jejich společné použití. Toto spojení je výhodné, protože poskytuje efektivní a udržitelný způsob správy globálního stavu a logiky aplikace bez nutnosti prop drillingu nebo složitého stavového managementu.

Prop drilling je termín používaný k popisu procesu, kdy se data předávají jako props přes několik úrovní vnořených komponent, aby dosáhla těch, které je skutečně potřebují. Tento proces je často neefektivní a způsobuje zbytečnou složitost aplikace, zvláště když se data musí předat přes mnoho úrovní komponent.

Hook useContext()

Hook useContext() umožňuje komponentě přistupovat k hodnotám kontextu, které jsou poskytnuty výše v komponentovém stromu. V praxi to znamená, že nemusíme hodnoty nebo funkce používané na mnohých místech aplikace posouvat přes několik komponent pomocí props, aby nedošlo k prop drillingu. Namísto toho je sdílíme přes kontext.

Kontext musíme nejdříve vytvořit a uložit do proměnné:

const MyContext = React.createContext();

Kdybychom do závorky funkce createContext() uvedli nějakou hodnotu, bude braná za výchozí pouze v případě, že v kontextu výše ve stromu komponent není odpovídající hodnota poskytnuta.

Pak obalíme komponentu, ve které chceme kontext využít, takzvaným providerem:


 

...konec náhledu článku...
Pokračuj dál

Znalosti v hodnotě stovek tisíc získáš za pár korun

Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.

Koupit tento kurz

Koupit všechny aktuálně dostupné lekce s funkcí odevzdávání úloh za pouhých 600 Kč
Aktuální stav konta 0 Kč
Koupí tohoto balíčku získáš přístup ke všem 30 článkům (30 lekcí) tohoto kurzu.

Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.

Co od nás v dalších lekcích dostaneš?
  • Neomezený a trvalý přístup k jednotlivým lekcím.
  • Kvalitní znalosti v oblasti IT.
  • Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.

Popis článku

Požadovaný článek má následující obsah:

V tutoriálu pokročilého Reactu si představíme hooky useContext() a useReducer() a jejich praktické využití na příkladu jednoduchého počítadla.

Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.

Článek pro vás napsala Laura Baluchová
Avatar
Aktivity