React-тағы контекст

Келесі хукті оқып көшпес бұрын, біз React-тағы контекст түсінігін қарастыруымыз керек.

Әдетте біз деректерді ата-ана компоненттерінен балаларға пропстар арқылы жіберетінбіз. Бұл әдіс жақсы, егер сізде аз компонент болса және пропстарды ата-анадан қажетті компонентке балалар арқылы 2-3 реттен артық лақтырудың қажеті жоқ болса.

Бұл әдіс сондай-ақ өте ыңғайсыз болып, әртүрлі проблемаларға әкелуі мүмкін, егер аралық компоненттерде бұл пропстар мүлдем қолданылмаса (мұндай проблема prop drilling деп аталады), немесе сіз бірдей деректерді көптеген компоненттерге жіберуіңіз керек болса.

Осы жағдайларда бізге контекст көмектесе алады, ол ата-ана компонентінің деректерін пропстар арқылы жібермей-ақ, компоненттер ағашындағы орналасуына қарамастан, кез келген бала компонент үшін қолжетімді етеді. Сәйкесінше, деректерді тек қажеті бар компоненттер қабылдайды.

Контексті пайдалану үшін оны жасау керек. Алдымен, MyContext.js файлын құрамыз және оған createContext функциясын импорттаймыз:

import { createContext } from 'react';

Енді контекст нысанын құрамыз, оны MyContext айнымалысына жазамыз, оны экспорттауды ұмытпаймыз. Біздің жағдайда, біз createContext-ке бастапқы мән ретінде null орнаттық, себебі бұл біз үшін маңызды емес (бос жақша қалдыруға да болатын). Бастапқыда берілген мән контекстті оқу кезінде пайда болады, егер басқа мәндер табылмаса. Бұл мән кез келген типте болуы мүмкін:

export const MyContext = createContext(null);

Келесі сабақта біз бірнеше компоненттен тұратын қолданбаны бөлек файлдарда орналастырамыз. Егер барлық компоненттер бір файлда болса, онда контекстті жасау үшін біз бөлек файл жасамас едік және оны экспорттамас едік.

Енді MyContext.js файлын бос App компонентіне импорттайық - деректерді жібергіміз келетін компонентке:

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

MyContext.js файлын жасаңыз және оны бос App компонентіне сабақта сипатталғандай импорттаңыз.