React-da Kontekst

Novbeti hooku öyrənməyə keçməzdən əvvəl biz React-da kontekst anlayışını nəzərdən keçirməliyik.

Adətən biz data valideyn komponentlərdən uşaq komponentlərə proplar vasitəsilə ötürürdük. Bu üsul yaxşıdır, əgər sizin az sayda komponentiniz varsa və propları valideyn komponentdən sizə lazım olan komponentə uşaq komponentlər vasitəsilə 2-3 dəfədən çox ötürməməlisinizsə.

Bu üsul həmçinin son dərəcə əlverişsiz ola bilər və müxtəlif problemlərə səbəb ola bilər, əgər aralıq komponentlərdə bu proplar ümumiyyətlə istifadə olunmursa (belə problemə prop drilling deyilir), ya da siz eyni dataları çox sayda komponentə ötürməli olursunuzsa.

Bu hallarda bizə kontekst kömək edə bilər, bu, valideyn komponentin datalarını uşaq komponent üçün əlçatan edir, komponent ağacında onun yerləşməsindən asılı olmayaraq, proplar vasitəsilə ötürmədən. Müvafiq olaraq, dataları yalnız onlara ehtiyacı olan komponentlər qəbul edəcək.

Kontekstdən istifadə etmək üçün onu yaratmaq lazımdır. Əvvəlcə, gəlin MyContext.js faylı yaradaq və ora createContext funksiyasını import edək:

import { createContext } from 'react';

İndi kontekst obyektini yaradaq, onu MyContext dəyişəninə yazaq, hansını ki ixrac etməyi unutmuruq. Bizim halda, biz createContext-ə ilkin qiymət olaraq null təyin etdik, çünki bu bizim üçün vacib deyil (sadəcə boş mötərizələr də buraxa bilərdik). Defolt təyin olunmuş qiymət kontekst oxunduqda görünəcək, əgər başqa heç bir qiymət tapılmasa. Bu qiymət istənilən tipdə ola bilər:

export const MyContext = createContext(null);

Novbeti dərsdə biz ayrı-ayrı fayllarda yerləşən bir neçə komponentdən ibarət proqram yaradacagıq. Əgər bütün komponentlər bir faylda olsaydı, onda kontekst yaratmaq üçün də ayrı bir fayl yaratmazdıq və onu ixrac etməzdik.

Gəlin indi MyContext.js-i boş komponent olan App-ə import edək - data ötürməyi planlaşdırdıgımız komponentə:

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

MyContext.js faylı yaradın və onu boş komponent olan App-ə import edin, dərsdə təsvir olundugu kimi.