Context in React

Voordat we verder gaan met de studie van de volgende hook, moeten we het concept van context in React bekijken.

Normaal gesproken gaven we gegevens door van ouderkomponenten naar dochterkomponenten met behulp van props. Deze methode is goed als je niet veel komponenten hebt en je de props niet hoeft door te geven van de ouderkomponent naar de gewenste komponent via dochterkomponenten voor meer dan 2-3 keer.

Deze methode kan ook erg onhandig worden en tot verschillende problemen leiden, als in de tussenliggende komponenten deze props helemaal niet worden gebruikt (een dergelijk probleem wordt prop drilling genoemd), of je moet dezelfde gegevens doorgeven aan een groot aantal komponenten.

In deze gevallen kan context ons helpen, waardoor gegevens van de ouderkomponent beschikbaar worden gemaakt voor elke dochterkomponent, ongeacht zijn positie in de boom van komponenten, zonder ze door te geven via props. Dienovereenkomstig zullen alleen die komponenten de gegevens ontvangen die ze nodig hebben.

Om context te kunnen gebruiken, moet het worden aangemaakt. Laten we eerst het bestand MyContext.js aanmaken en de functie createContext importeren:

Laten we nu een contextobject aanmaken, het in de variabele MyContext zetten, die we niet vergeten te exporteren. In ons geval hebben we in createContext de beginwaarde null ingesteld, omdat het voor ons niet essentieel is (we hadden ook gewoon haakjes leeg kunnen laten). De ingestelde standaardwaarde versijnt bij het lezen van de context, als er geen andere worden gevonden. Deze waarde kan van elk type zijn:

In de volgende les zullen we een applicatie maken van verschillende komponenten, geplaatst in aparte bestanden. Als alle komponenten in één bestand zouden staan, dan zouden we voor het aanmaken van context geen apart bestand maken en zouden we het niet exporteren.

Laten we nu MyContext.js importeren in de lege komponent App - in de komponent van waaruit we van plan zijn gegevens door te geven: