Kontext v Reacte

Predtým, než prejdeme k štúdiu nasledujúceho hooku, musíme zvážiť pojem kontextu v Reacte.

Zvyčajne sme prenášali dáta z nadradených komponentov do podradených pomocou props. Tento spôsob je dobrý, ak nemáte veľa komponentov a nemusíte prenášať props z nadradeného do požadovaného komponentu cez podradené viac ako 2-3 krát.

Tento spôsob sa tiež môže stať extrémne nepohodlným a viesť k rôznym problémom, ak sa v prechodných komponentoch tieto props vôbec nepoužívajú (takýto problém sa nazýva prop drilling), alebo ak potrebujete prenášať rovnaké dáta veľkému počtu komponentov.

V týchto prípadoch nám môže pomôcť kontext, ktorý umožňuje sprístupniť dáta nadradeného komponentu pre akýkoľvek podradený komponent, nezávisle od jeho umiestnenia v strome komponentov, bez ich prenosu cez props. Preto dáta budú prijímať len tie komponenty, ktoré ich potrebujú.

Aby sme mohli použiť kontext, musíme ho vytvoriť. Najprv vytvorme súbor MyContext.js a importujme do neho funkciu createContext:

import { createContext } from 'react';

Teraz vytvorme objekt kontextu, zapíšme ho do premennej MyContext, ktorú nezabudneme exportovať. V našom prípade sme nastavili v createContext počiatočnú hodnotu null, pretože pre nás nie je zásadná (mohli sme nechať jednoducho prázdne zátvorky). Predvolená hodnota sa objaví pri čítaní kontextu, ak nebudú nájdené žiadne iné. Táto hodnota môže byť ľubovoľného typu:

export const MyContext = createContext(null);

V nasledujúcej lekcii vytvoríme aplikáciu z niekoľkých komponentov, umiestnených v samostatných súboroch. Ak by boli všetky komponenty v jednom súbore, tak ani na vytvorenie kontextu by sme neurobili samostatný súbor a ani by sme ho neexportovali.

Poďme teraz importovať MyContext.js do prázdneho komponentu App - do toho komponentu, z ktorého sa chystáme prenášať dáta:

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

Vytvorte súbor MyContext.js a importujte ho do prázdneho komponentu App, ako je popísané v lekcii.