Kontextus a Reactben

Mielőtt rátérnénk a következő hook tanulmányozására, szükséges megismerkednünk a kontextus fogalmával a Reactben.

Általában a szülő komponensekből az adatokat a gyermek komponenseknek props-okon keresztül adtuk át. Ez a módszer akkor jó, ha kevés komponensed van, és nem kell a props-okat a szülőtől a kívánt komponensig gyermek komponenseken keresztül továbbdobálni 2-3 alkalommal.

Ez a módszer rendkívül kényelmetlenné is válhat és különféle problémákhoz vezethet, ha a köztes komponensekben ezek a props-ok egyáltalán nincsenek használva (ezt a problémát prop drilling-nek hívják), vagy ugyanazokat az adatokat kell nagyszámú komponensnek átadni.

Ilyen esetekben a kontextus segíthet, amely lehetővé teszi, hogy a szülő komponens adatai bármely gyermek komponens számára elérhetőek legyenek, függetlenül attól, hogy hol helyezkednek el a komponensfában, anélkül, hogy props-okon keresztül adnánk át őket. Ennek megfelelően csak azok a komponensek fogják fogadni az adatokat, amelyeknek szükségük van rájuk.

A kontextus használatához létre kell hozni azt. Először hozzunk létre egy MyContext.js fájlt és importáljuk bele a createContext függvényt:

import { createContext } from 'react';

Most hozzuk létre a kontextus objektumot, írjuk be a MyContext változóba, amelyet ne felejtsünk el exportálni. A mi esetünkben a createContext kezdeti értékét null-ra állítottuk, mivel ez nem lényeges számunkra (üres zárójeleket is hagytunk volna). Az alapértelmezett érték a kontextus olvasásakor jelenik meg, ha nem találhatók más értékek. Ennek az értéknek bármilyen típusú lehet:

export const MyContext = createContext(null);

A következő leckében létrehozunk egy alkalmazást több, külön fájlokban elhelyezett komponensből. Ha minden komponens egy fájlban lenne, akkor a kontextus létrehozásához sem készítenénk külön fájlt és nem exportálnánk.

Most importáljuk a MyContext.js-t egy üres App komponensbe - abba a komponensbe, amelyből adatokat kívánunk továbbítani:

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

Hozd létre a MyContext.js fájlt és importáld az üres App komponensbe, ahogyan azt a leckében leírjuk.