Kontekstas React

Prieš pereinant prie kito kabliuko studijavimo, turime apsvarstyti konteksto sąvoką React.

Paprastai mes perdavėme duomenis iš tėvinių komponentų į antrinius naudodami props. Šis metodas yra geras, jei turite nedaug komponentų ir jums nereikia perduoti props iš tėvinio į reikiamą komponentą per antrinius daugiau nei 2-3 kartus.

Šis metodas taip pat gali tapti labai nepatogus ir sukelti įvairių problemų, jei tarpiniuose komponentuose šie propsai apskritai nenaudojami (tokia problema vadinama prop drilling), arba jums reikia perduoti tuos pačius duomenis dideliam komponentų skaičiui.

Tokiais atvejais mums gali padėti kontekstas, kuris leidžia padaryti tėvinio komponento duomenis prieinamus bet kuriam antriniam komponentui, nepriklausomai nuo jo vietos komponentų medyje, neperduodant jų per props. Atitinkamai, duomenis priims tik tie komponentai, kuriems jie reikalingi.

Norint panaudoti kontekstą, jį reikia sukurti. Pirmiausia, sukurkime failą MyContext.js ir importuokime į jį funkciją createContext:

import { createContext } from 'react';

Dabar sukurkime konteksto objektą, įrašykime jį į kintamąjį MyContext, kurio nepamirškime eksportuoti. Mūsų atveju, mes nustatėme createContext pradinę reikšmę null, nes mums ji nerūpi (galima buvo palikti tiesiog tuščius skliaustus). Nustatyta numatytoji reikšmė pasirodys skaitant kontekstą, jei nebus rasta jokių kitų. Ši reikšmė gali būti bet kokio tipo:

export const MyContext = createContext(null);

Kitoje pamokoje mes sukursime programą iš kelių komponentų, esančių atskiruose failuose. Jei visi komponentai būtų viename faile, tai ir kontekstui kurti mes nedarytume atskiro failo ir jo neeksportuotume.

Dabar importuokime MyContext.js į tuščią komponentą App - į tą komponentą, iš kurio ketiname perduoti duomenis:

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

Sukurkite failą MyContext.js ir importuokite jį į tuščią komponentą App, kaip aprašyta pamokoje.