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
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
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- 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íť.