🤔 Мотивация
Вы чувствуете, что знаете React, но понятия не имеете, как правильно предоставить переменную состояния или что-то подобное для глубоко вложенных дочерних компонентов?
Не волнуйтесь — я покажу вам, как это сделать.
✨ Введение
В этой статье я покажу вам, как использовать React ContextAPI. Пойдем.
createContext, поставщик контекста
Чтобы предоставить какой-либо контекст (набор переменных или функций), нам нужно создать его заранее. Для создания контекста нам нужно использовать функцию createContext. Взглянем.
Итак, мы подготовили контекст, но что он может сделать? Что нам нужно сделать, чтобы предоставить какой-либо контент вложенным дочерним элементам?
Нам просто нужно создать поставщика контекста и обернуть компоненты там, где нам нужно получить доступ к этому контексту.
Подготовим нашего провайдера
Теперь нам просто нужно обернуть наш компонент, например, App, чтобы предоставить значение контекста всем дочерним элементам. Но чтобы сделать код лучше, давайте подготовим хук useThemeContext для доступа к переменным контекста.
OK — хук useThemeContext сделает потребление контекста более удобным. Давайте предоставим наше приложение.
OK — наш провайдер контекста готов, но что теперь?
Теперь мы можем использовать наши контекстные переменные вот так.
Теперь мы можем получить доступ к контексту темы везде в дочерних элементах компонента приложения и внутри компонента приложения, изменения будут видны в каждом компоненте, который использует наш контекст.
🍟 Резюме
ContextAPI — очень мощная концепция в React. Вам не нужно создавать водопад переменных, предоставляемых в качестве реквизита для глубоко вложенных компонентов. Это быстро, легко и очень полезно.
👍 Спасибо
Надеюсь, вам действительно понравилась эта статья.
