Kontekst i React

Før vi går videre til å studere neste hook, må vi vurdere begrepet kontekst i React.

Vanligvis overførte vi data fra foreldrekomponenter til barnekomponenter ved hjelp av props. Denne metoden er bra hvis du ikke har mange komponenter og du ikke trenger å sende props fra foreldrekomponenten til den ønskede komponenten gjennom barnekomponenter mer enn 2-3 ganger.

Denne metoden kan også bli ekstremt upraktisk og føre til ulike problemer hvis propsene ikke brukes i det hele tatt i mellomliggende komponenter (et slikt problem kalles prop drilling), eller hvis du trenger å sende de samme dataene til et stort antall komponenter.

I disse tilfellene kan kontekst hjelpe oss, som gjør data fra en foreldrekomponent tilgjengelig for enhver barnekomponent, uavhengig av dens plassering i komponenttreet, uten å sende dem gjennom props. Følgelig vil bare de komponentene som trenger dem ta imot dataene.

For å bruke kontekst, må den opprettes. Til å begynne med, la oss opprette filen MyContext.js og importere funksjonen createContext inn i den:

import { createContext } from 'react';

La oss nå opprette et kontekst-objekt, skrive det til variabelen MyContext, som vi må huske å eksportere. I vårt tilfelle satte vi initialverdi i createContext til null, siden det ikke er prinsipiellt for oss (vi kunne ha latt den stå tom). Standardverdien som er satt vil vises når konteksten leses, hvis ingen andre verdier blir funnet. Denne verdien kan være av hvilken som helst type:

export const MyContext = createContext(null);

I neste leksjon vil vi opprette en applikasjon bestående av flere komponenter, plassert i separate filer. Hvis alle komponentene var i én fil, ville vi ikke ha laget en egen fil for konteksten og ikke eksportert den.

La oss nå importere MyContext.js inn i den tomme komponenten App - inn i den komponenten som vi skal sende data fra:

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

Opprett filen MyContext.js og importer den inn i den tomme komponenten App, som beskrevet i leksjonen.