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