React-da Kontekst

Indiki gok öwrenmäge geçmezden ozal, biz React-daky kontekst düşünjesine seretmeli.

Adaty halda, ata komponentlerden çaga komponentlere maglumatlary proplar arkaly geçirdik. Bu usul, az komponentiňiz bar we proplary ata komponentden gerekli komponente çaga komponentler arkaly 2-3 gezekden köp geçirmän bolýan ýagdaýlarda gowy.

Bu usul, ara komponentlerde bu proplar umuman ulanylmaýan ýagdaýlarda (ýönekeý aýdanyňda, prop drilling diýilýän meselede) uly kynçylyklara getirip biler ýa-da birnäçe komponente birmeňzeş maglumatlary geçirmeli bolup bilersiňiz.

Bu ýagdaýlarda, ata komponentiň maglumatlaryny proplar arkaly geçirmän, komponentler gurluşyndaky ýerine garamazdan, islendik çaga komponent üçin elýeterli etmäge mümkinçilik berýän kontekst kömek edip biler. Şonuň üçin, maglumatlary diňe olara gerek bolan komponentler alar.

Konteksti ulanmak üçin, ony döretmeli. Ilki bilen, MyContext.js faýlyny dörediň we ona createContext funksiýasyny import ediň:

import { createContext } from 'react';

Indi kontekst obýektini dörediň, ony MyContext üýtgeýjisine ýazyň we eksport etmegi ýatdan çykarmaň. Bizim ýagdaýymyzda, başlangyç bahasy hökmünde createContext funksiýasyna null belgiländik, sebäbi bu biziň üçin möhüm däl (ýöne boş ýaýyş hem goýup bolardy). Başga bir baha tapylmadyk ýagdaýlarda, deslapky baha konteksti okamakda peýda bolup biler. Bu baha islendik görnüşde bolup biler:

export const MyContext = createContext(null);

Indiki sapakda, aýratyn faýllarda ýerleşdirilen birnäçe komponentden ybarat programmany dörederis. Eger hemme komponent bir faýlda bolsa, onda kontekst döretmek üçin aýratyn faýl döretmez we ony eksport etmezdik.

Indi MyContext.js faýlyny, boş App komponentine - maglumatlary geçirmekçi bolýan komponente import edeliň:

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

MyContext.js faýlyny dörediň we onuňy, sapakda görkezilişi ýaly, boş App komponentine import ediň.