Konteksti Reactissa

Ennen kuin siirrymme seuraavan koukun opiskeluun, meidän on tarkasteltava kontekstin käsitettä Reactissa.

Yleensä siirsimme tietoja vanhemmista komponenteista lapsikomponenteihin käyttämällä propseja. Tämä menetelmä on hyvä, jos sinulla on vähän komponentteja ja sinun ei tarvitse välittää propseja vanhemmasta haluttuun komponenttiin lapsen kautta enemmän kuin 2-3 kertaa.

Tämä menetelmä voi myös olla erittäin hankala ja johtaa erilaisiin ongelmiin, jos välikomponenteissa näitä propseja ei käytetä ollenkaan (tällaista ongelmaa kutsutaan prop drilling:ksi), tai sinun täytyy välittää samoja tietoja suurelle määrälle komponentteja.

Näissä tapauksissa konteksti voi auttaa meitä, joka mahdollistaa vanhemman komponentin tietojen saatavuuden mille tahansa lapsikomponentille, riippumatta sen sijainnista komponenttipuussa, ilman että niitä välitetään propseilla. Vastaavasti tietoja vastaanottavat vain ne komponentit, jotka tarvitsevat niitä.

Kontekstin käyttämiseksi se on luotava. Aluksi, luodaan tiedosto MyContext.js ja tuodaan siihen funktio createContext:

import { createContext } from 'react';

Luodaan nyt kontekstiolio, kirjoitetaan se muuttujaan MyContext, jonka emme saa unohtaa viedä. Meidän tapauksessamme, asetimme createContext:iin alkuarvon null, koska se ei ole meille periaatteellinen (olisi voinut jättää vain tyhjät sulkeet). Oletusarvo ilmestyy kontekstia luettaessa, jos ei löydy muita arvoja. Tämä arvo voi olla minkä tyyppinen tahansa:

export const MyContext = createContext(null);

Seuraavassa oppitunnissa luomme sovelluksen useista komponenteista, jotka sijaitsevat erillisissä tiedostoissa. Jos kaikki komponentit olisivat yhdessä tiedostossa, emme myöskään kontekstin luomiseksi olisi tehneet erillistä tiedostoa emmekä olisi vientiä sitä.

Tuodaan nyt MyContext.js tyhjään komponenttiin App - siihen komponenttiin, josta aiomme lähettää tietoja:

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

Luo tiedosto MyContext.js ja tuo se tyhjään komponenttiin App, kuten oppitunnissa kuvattu.