Kontekst Reactis

Enne järgmise konksu õppimise peame vaatlema konteksti mõistet Reactis.

Tavaliselt edastasime andmeid vanemkomponentidelt lastekomponentidele kasutades propse. See meetod on hea, kui teil on vähe komponente ja te ei pea andma propse edasi vanemkomponendilt vajaliku komponendini läbi lastekomponentide rohkem kui 2-3 korda.

See meetod võib muutuda äärmiselt ebamugavaks ja põhjustada erinevaid probleeme, kui vahekomponentides neid propse üldse ei kasutata (sellist probleemi nimetatakse prop drilling), või kui teil on vaja edastada samu andmeid suurele hulgale komponentidele.

Nendel juhtudel võib meid aidata kontekst, mis võimaldab muuta vanemkomponendi andmed kättesaadavaks igale lapsekomponendile, sõltumata selle asukohast komponentide puus, ilma et neid edastataks propse kaudu. Vastavalt sellele võtavad andmeid vastu ainult need komponendid, kes neid vajavad.

Konteksti kasutamiseks tuleb see luua. Alustuseks loome faili MyContext.js ja impordime sinna funktsiooni createContext:

import { createContext } from 'react';

Nüüd loome konteksti objekti, kirjutame selle muutujasse MyContext, mida me ei tohi unustada eksportida. Meie juhul seadsime createContext-ile algväärtuseks null, kuna see ei ole meie jaoks oluline (oleks võinud jätta lihtsalt tühjad sulud). Vaikeväärtus ilmub konteksti lugemisel, kui mõnda muud väärtust ei leita. Sellel väärtusel võib olla mis tahes tüüp:

export const MyContext = createContext(null);

Järgmises õppetükis loome rakenduse mitmest komponendist, mis asuvad eraldades failides. Kui kõik komponendid oleksid ühes failis, siis me ei teeks konteksti loomiseks eraldat faili ega eksportiks seda.

Importime nüüd MyContext.js tühja komponendi App - komponenti, millest me kavatseme andmeid edastada:

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

Looge fail MyContext.js ja importige see tühja komponenti App, nagu õppetükis kirjeldatud.