Недавно я работал над проектом, который потребовал от меня научиться использовать хук useContext в React. До сих пор я использовал хук useState и передавал props для обмена переменными между компонентами. Посмотрев пару видео, прочитав пару статей и использовав хук в своем приложении, я могу честно сказать, что я фанат. Мой код стал чище и практичнее. Я чувствовал, что это долгий и сложный путь. Поэтому я хочу поделиться с вами тем, как и когда вы будете использовать этот хук
Что такой useContext?
useContext — это React Hook, который позволяет вам делиться переменными состояния и функциями сеттера от компонента верхнего уровня до вложенных дочерних компонентов без необходимости передавать props через каждый уровень. Если вы создали приложение React, вам, скорее всего, приходилось передавать props от родительского компонента дочернему компоненту, от дочернего компонента родительскому компоненту или даже от дочернего компонента другому дочернему компоненту. Этот процесс может быть довольно утомительным. useContext позволяет нам делиться данными глобально, делая их доступными в любом компоненте, пока вы создаете Context в компоненте верхнего уровня.
Когда его использовать?
Часто хук useContext используется, когда программисту нужно отслеживать, когда пользователь вошел в систему или вышел из нее. Вместо того, чтобы проверять, вошел ли пользователь в систему в каждом компоненте, они могут создать контекст, который они могут использовать во всем приложении, чтобы проверять, вошел ли пользователь в систему или нет. Он также используется, когда в приложении есть тема (например, темная тема или светлая тема), которую можно переключать в соответствии с предпочтениями клиента. Другими словами, useContext используется, когда вы работаете с состоянием и вам нужно иметь к нему доступ «глобально» и иметь возможность изменять его во всем приложении.
Как им пользоваться?
Я создал простое приложение для демонстрационных целей. Это приложение имеет компонент «Login» и компонент «Home». Если пользователь вошел в систему, я хочу, чтобы отображалась домашняя страница. Если пользователь не вошел в систему, я хочу, чтобы отображалась страница «Login».Для этого мы воспользуемся хуком useContext. Сначала вам нужно импортировать { createContext } в компонент верхнего уровня (App.jsx) и инициализировать его.
createContext создает экземпляр контекста, но не создает никаких значений. Нам понадобится Context.Provider для предоставления значений нашему контексту и передачи их нашим дочерним компонентам. Обязательно экспортируйте созданный контекст, так как мы будем использовать его аналогично компоненту в нашем приложении.
Далее давайте создадим переменную состояния и функцию-сеттер для использования в нашем контексте. В этом случае я хочу узнать, вошел ли пользователь в систему или нет, поэтому я создам переменную loggedIn, которая будет содержать логическое значение. Я также создам функцию setLoggedIn для изменения значения loggedIn по мере необходимости в нашем приложении. Я не хочу, чтобы мои компоненты Home и Login отображались одновременно, я хочу, чтобы они переключались в соответствии со значением true или false переменной loggedIn. Поэтому я также удалил их из нашего компонента App.jsx и использовал для этой цели тернарный оператор.
Мы создали переменную состояния и функцию и передали ее нашему LoggedInContext.Provider. Теперь давайте создадим кнопку в наших компонентах Login и Home для переключения между состояниями login in и logout.
Далее мы хотим получить доступ к функции setLoggedIn внутри наших компонентов Login и Home. Вот тут-то и пригодится хук useContext(), он позволяет нам считывать значение в контексте и использовать его в наших дочерних компонентах. Для этого нам нужно импортировать хук useContext и LoggedInContext из App.jsx. Примечание: хук useContext() также перерисовывает компонент при изменении значения контекста.
В коде выше мы используем хук useContext для передачи функции setLoggedIn. Используя обработчик событий onClick и функцию setLoggedIn, мы можем изменить значение loggedIn на true при нажатии кнопки Login. Мы сделаем то же самое для нашего компонента Home, за исключением того, что вместо этого изменим значение с true на false.
Нажимая кнопку входа или выхода на нашем интерфейсе, мы теперь можем переключаться между страницей входа и домашней страницей в зависимости от того, вошел ли пользователь в систему или нет.