Kontekst i React

Før vi går videre til at studere den næste hook, er vi nødt til at overveje begrebet kontekst i React.

Normalt overførte vi data fra forældrekomponenter til underordnede komponenter ved hjælp af props. Denne metode er god, hvis du ikke har mange komponenter, og du ikke behøver at videregive props fra forældrekomponenten til den ønskede komponent gennem underordnede komponenter mere end 2-3 gange.

Denne metode kan også blive ekstremt upraktisk og føre til forskellige problemer, hvis disse props slet ikke bruges i mellemliggende komponenter (et sådant problem kaldes prop drilling), eller hvis du skal videregive de samme data til et stort antal komponenter.

I disse tilfælde kan kontekst hjælpe os, som gør forældrekomponentens data tilgængelige for enhver underordnet komponent, uanset dens placering i komponenttræet, uden at videregive dem gennem props. Følgelig vil kun de komponenter, der har brug for dem, modtage dataene.

For at bruge kontekst, skal den oprettes. Til at starte med, lad os oprette filen MyContext.js og importere funktionen createContext til den:

Lad os nu oprette et kontekstobjekt, skrive det til variablen MyContext, som vi ikke må glemme at eksportere. I vores tilfælde satte vi startværdien i createContext som null, fordi det ikke er afgørende for os (vi kunne også have ladet parenteserne være tomme). Standardværdien vil vises, når konteksten læses, hvis der ikke findes andre værdier. Denne værdi kan være af enhver type:

I den næste lektion vil vi oprette en applikation bestående af flere komponenter, placeret i separate filer. Hvis alle komponenter var i én fil, ville vi ikke lave en separat fil til konteksten og ikke eksportere den.

Lad os nu importere MyContext.js til den tomme komponent App - til den komponent, som vi har tænkt os at sende data fra: