Kontekst v Reactu

Preden nadaljujemo s preučevanjem naslednjega kavlja, moramo razmisliti o pojmu konteksta v Reactu.

Običajno smo podatke prenašali od starševskih komponent do hčerinskih s pomočjo props. Ta način je dober, če imate malo komponent in vam ni treba prenašati props od starševske do želene komponente prek hčerinskih več kot 2-3 krat.

Ta način lahko postane zelo nepriročen in povzroči različne težave, če se v vmesnih komponentah ti props sploh ne uporabljajo (takšna težava se imenuje prop drilling), ali morate prenašati iste podatke velikemu številu komponent.

V teh primerih nam lahko pomaga kontekst, ki omogoča, da so podatki starševske komponente dostopni za katero koli hčerinsko, ne glede na njegovo mesto v drevesu komponent, brez prenosa prek props. V skladu s tem bodo podatke sprejele samo tiste komponente, ki jih potrebujejo.

Da bi uporabili kontekst, ga je treba ustvariti. Za začetek ustvarimo datoteko MyContext.js in vanj uvozimo funkcijo createContext:

import { createContext } from 'react';

Zdaj ustvarimo objekt konteksta, zapišimo ga v spremenljivko MyContext, ki je ne pozabimo izvoziti. V našem primeru smo nastavili v createContext začetno vrednost null, ker nam ni pomembno (lahko bi pustili samo prazne oklepaje). Privzeta vrednost se bo pojavila pri branju konteksta, če ne bo najdenih kakšnih drugih. Ta vrednost je lahko katere koli vrste:

export const MyContext = createContext(null);

V naslednji lekciji bomo ustvarili aplikacijo iz več komponent, nameščenih v ločenih datotekah. Če bi bile vse komponente v eni datoteki, potem tudi za ustvarjanje konteksta ne bi naredili posebne datoteke in je ne bi izvozili.

Zdaj pa uvozimo MyContext.js v prazno komponento App - v tisto komponento, iz katere nameravamo prenasljati podatke:

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

Ustvarite datoteko MyContext.js in jo uvozite v prazno komponento App, kot je opisano v lekciji.