Кантэкст у React

Перад тым, як перайсці да вывучэння наступнага хука, нам неабходна разгледзець паняцце кантэксту у React.

Звычайна мы перадавалі даныя ад бацькоўскіх кампанентаў даччыным з дапамогай пропсаў. Гэты спосаб добры, калі ў вас няшмат кампанентаў і вам не трэба перакідваць пропсы ад бацькоўскага да патрэбнага вам кампанента праз даччыныя больш 2-3 разы.

Даны спосаб таксама можа стаць вельмі незручным і прывесці да розных праблем, калі ў прамежкавых кампанентах гэтыя пропсы ўвогуле не выкарыстоўваюцца (такая праблема завецца prop drilling), ці вам трэба перадаваць адны і тыя ж даныя вялікай колькасці кампанентаў.

У гэтых выпадках нам можа дапамагчы кантэкст, які дазваляе зрабіць даныя бацькоўскага кампанента даступнымі для любога даччынага, незалежна ад яго размяшчэння ў дрэве кампанентаў, без перадачы іх праз пропсы. Адпаведна, прымаць даныя будуць толькі тыя кампаненты, якім яны патрэбны.

Для таго, каб скарыстацца кантэкстам, яго трэба стварыць. Для пачатку, створым файл MyContext.js і імпартуем у яго функцыю createContext:

import { createContext } from 'react';

Цяпер створым аб'ект кантэксту, запiшам яго ў зменную MyContext, якую не забудзем экспартаваць. У нашым выпадку, мы ўстанавілі ў createContext пачатковае значэнне null, так як нам яно непрынцыпова (можна было пакінуць проста пустыя дужкі). Зададзенае значэнне па змаўчанні з'явіцца пры чытанні кантэксту, калі не будзе знойдзена якіх-небудзь іншых. Дадзенае значэнне можа быць любога тыпу:

export const MyContext = createContext(null);

У наступным уроку мы створым прыкладанне з некалькіх кампанентаў, размешчаных у асобных файлах. Калі б усе кампаненты былі у адным файле, то і для стварэння кантэксту мы не сталі б рабіць асобны файл і не сталі б яго экспартаваць.

Давайце цяпер імпартаваць MyContext.js у пусты кампанент App - у той кампанент, з якога мы збіраемся перадаваць даныя:

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

Стварыце файл MyContext.js і імпартуйце яго ў пусты кампанент App, як апісана ў уроку.