Контекст во 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, како што е опишано во лекцијата.