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ке, сабакта сүрөттөлгөндөй, импорттогула.