Konteks in React

Voordat ons voortgaan om die volgende hook te bestudeer, moet ons die konsep van konteks in React oorweeg.

Gewoonlik het ons data van ouerkomponente na kinderkomponente oorgedra deur gebruik te maak van props. Hierdie metode is goed as jy nie baie komponente het nie en jy nie props van die ouer na die nodige komponent hoef deur te gooi via kinderkomponente meer as 2-3 keer nie.

Hierdie metode kan ook uiters ongerieflik raak en tot verskeie probleme lei, indien hierdie props glad nie in tussenkomponente gebruik word nie (so 'n probleem word prop drilling genoem), of as jy dieselfde data na 'n groot aantal komponente moet oordra.

In hierdie gevalle kan konteks ons help, wat dit moontlik maak om data van die ouerkomponent beskikbaar te maak vir enige kinderkomponent, ongeag sy posisie in die komponentboom, sonder om dit deur props oor te dra. Gevolglik sal slegs daardie komponente wat dit nodig het, die data ontvang.

Om van konteks gebruik te maak, moet dit geskep word. Eerstens, laat ons 'n lêer MyContext.js skep en die funksie createContext daarin invoer:

import { createContext } from 'react';

Laat ons nou die konteksvoorwerp skep, dit in die veranderlike MyContext stoor, wat ons nie moet vergeet om uit te voer nie. In ons geval het ons die aanvanklike waarde in createContext gestel as null, aangesien dit nie vir ons van wesenlike belang is nie (ons kon net leë hakies gelaat het). Die verstekwaarde sal verskyn wanneer konteks gelees word, indien geen ander waarde gevind word nie. Hierdie waarde kan enige tipe wees:

export const MyContext = createContext(null);

In die volgende les sal ons 'n toepassing uit verskeie komponente skep, wat in aparte lêers geplaas is. As alle komponente in een lêer was, sou ons nie 'n aparte lêer vir die konteks skep nie en sou ons dit ook nie uitvoer nie.

Laat ons nou MyContext.js invoer in die leë komponent App - in daardie komponent vanwaar ons data gaan oordra:

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

Skep die lêer MyContext.js en voer dit in die leë komponent App in, soos beskryf in die les.