Контекст в 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, както е описано в урока.