Kontext v Reactu

Než přejdeme k studiu následujícího hooku, musíme se podívat na pojem kontextu v Reactu.

Obvykle jsme předávali data z rodičovských komponent do podřízených pomocí props. Tento způsob je dobrý, pokud nemáte mnoho komponent a nemusíte předávat props z rodičovské komponenty do požadované komponenty přes podřízené více než 2-3 krát.

Tento způsob se také může stát extrémně nepohodlným a vést k různým problémům, pokud se v mezilehlých komponentách tyto props vůbec nepoužívají (takový problém se nazývá prop drilling), nebo potřebujete předávat stejná data velkému množství komponent.

V těchto případech nám může pomoci kontext, který umožňuje zpřístupnit data rodičovské komponenty jakékoli podřízené komponentě, bez ohledu na její umístění ve stromu komponent, bez předávání přes props. Data tedy budou přijímat pouze ty komponenty, které je potřebují.

Abyste mohli použít kontext, je ho potřeba vytvořit. Nejprve vytvořte soubor MyContext.js a importujte do něj funkci createContext:

import { createContext } from 'react';

Nyní vytvoříme objekt kontextu, zapíšeme ho do proměnné MyContext, kterou nezapomeneme exportovat. V našem případě jsme nastavili v createContext výchozí hodnotu null, protože pro nás není zásadní (mohli jsme nechat jen prázdné závorky). Nastavená výchozí hodnota se objeví při čtení kontextu, pokud nebudou nalezeny žádné další. Tato hodnota může být jakéhokoli typu:

export const MyContext = createContext(null);

V příští lekci vytvoříme aplikaci z několika komponent, umístěných v samostatných souborech. Pokud by všechny komponenty byly v jednom souboru, tak bychom pro vytvoření kontextu nevytvářeli samostatný soubor a neexportovali bychom ho.

Nyní importujme MyContext.js do prázdné komponenty App - do komponenty, ze které se chystáme předávat data:

import { MyContext } from './MyContext.js';

Vytvořte soubor MyContext.js a importujte jej do prázdné komponenty App, jak je popsáno v lekci.