Konteksts React

Pirms pāriet pie nākamā āķa apguves, mums ir jāapsver konteksta jēdziens React.

Parasti mēs pārraidījām datus no vecāku komponentiem uz meitas komponentiem, izmantojot props. Šī metode ir laba, ja jums nav daudz komponentu un jums nav nepieciešams pārsūtīt props no vecākā uz vajadzīgo komponentu caur meitas komponentiem vairāk 2-3 reizes.

Šī metode var arī kļūt ļoti neērta un izraisīt dažādas problēmas, ja starpkomponentos šie props vispār netiek izmantoti (tādu problēmu sauc par prop drilling), vai arī jums ir jāpārraida vieni un tie paši dati lielam skaitam komponentu.

Šajos gadījumos mums var palīdzēt konteksts, kas ļauj padarīt vecākā komponenta datus pieejamus jebkuram meitas komponentam, neatkarīgi no tā atrašanās vietas komponentu kokā, neizmantojot to pārraidi caur props. Attiecīgi, datus saņems tikai tie komponenti, kuriem tie ir nepieciešami.

Lai izmantotu kontekstu, tas ir jāizveido. Sākumā izveidosim failu MyContext.js un importēsim tajā funkciju createContext:

import { createContext } from 'react';

Tagad izveidosim konteksta objektu, ierakstīsim to mainīgajā MyContext, kuru ne aizmirsīsim eksportēt. Mūsu gadījumā mēs iestatījām createContext sākotnējo vērtību null, jo mums tā nav būtiska (varēja atstāt arī tikai tukšas iekavas). Norādītā noklusējuma vērtība parādīsies, lasot kontekstu, ja netiks atrasta kāda cita. Šī vērtība var būt jebkura tipa:

export const MyContext = createContext(null);

Nākamajā nodarbībā mēs izveidosim lietotni no vairākiem komponentiem, kas atrodas atsevišķos failos. Ja visi komponenti būtu vienā failā, tad arī konteksta izveidei mēs nebūtu izveidojuši atsevišķu failu un ne būtu to eksportējuši.

Tagad importēsim MyContext.js tukšā komponentā App - komponentā, no kura mēs plānojam pārraidīt datus:

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

Izveidojiet failu MyContext.js un importējiet to tukšajā komponentā App, kā aprakstīts nodarbībā.