React Context API — это инструмент управления состоянием, используемый для обмена данными между компонентами React. Узнайте, как использовать Context API для отслеживания пользователей, прошедших проверку подлинности, в функциональных компонентах.

Что такое React Context API?

React — это библиотека, основанная на компонентах. Его приложения включают разные компоненты которые работают вместе. В некоторых случаях вашему приложению необходимо обмениваться данными между этими компонентами.

Например, вы можете захотеть поделиться именем пользователя текущего пользователя из Авторизоваться компонента к другим компонентам в вашем приложении. Контекст упрощает совместное использование имени пользователя, устраняя необходимость передачи данных через каждый компонент в дереве компонентов.

Когда следует использовать React Context API?

Прежде чем использовать контекст React, сначала рассмотрите тип данных, с которыми вы работаете. Контекст больше подходит для статических данных. Данные, которые постоянно изменяются, вызовут слишком много повторных рендерингов и, как следствие, снизят производительность. Данные также должны быть глобальными или, по крайней мере, использоваться многими компонентами, например, такие данные, как язык пользователя, темы и аутентификация.

Использование контекста для отслеживания статуса аутентификации пользователя

Если ваше приложение использует аутентификацию, многим его компонентам потребуется знать текущее состояние аутентификации пользователя. Передача статуса аутентификации каждому компоненту является избыточной и приводит к сверлению реквизита, поэтому использование контекста является хорошим вариантом.

создатьконтекст()

Чтобы начать работу с Context API, вам сначала нужно создать его, используя этот синтаксис.

const Context = React.createContext (значение по умолчанию);

Значение по умолчанию не является обязательным и обычно используется в целях тестирования.

Провайдер

У каждого контекста есть провайдер, который получает значение, потребляемое компонентами, которые он обертывает. Это позволяет этим компонентам подписываться на изменения контекста.

использованиеконтекста

использоватьконтекст() это Реагировать крючок что позволяет компонентам потреблять контекст. Вам нужно только пройти в контексте.

const contextValue = useContext (Контекст)

Давайте теперь создадим контекст аутентификации, чтобы отслеживать состояние аутентификации.

Начните с создания нового файла, AuthContext.js, и добавьте следующее.

импортировать {createContext} из «реагировать»;
const AuthContext = createContext();
экспортировать AuthContext по умолчанию;

Далее создайте AuthProvider.js и добавьте функцию провайдера.

импортировать {useState, useEffect} из «реагировать»;
импортировать {getUser} из './auth.js'
импортировать AuthContext из './AuthContext'
экспортировать константу AuthProvider = ({ дочерние элементы }) => {
 const [пользователь, setUser] = useState (null);
 использоватьЭффект(() => {
 константа текущийПользователь = получитьПользователь()
 setUser (текущий пользователь)
 }, []);
возврат (
{дети}
 );
 };

Здесь вы извлекаете текущего пользователя из поддельного получитьпользователя() функция. В реальном приложении это будет ваш серверный сервис.

Сохраните пользователя в текущем состоянии, чтобы отслеживать любые изменения, а затем передайте пользователя провайдеру в свойстве value.

AuthProvider.js также получает дочерние элементы с доступом к контексту.

Следующим шагом является создание пользовательского хука, который позволит компонентам, упакованным с провайдером, получить доступ к контексту.

Создать новый файл использоватьAuthContext.js и добавьте следующее.

импортировать AuthContext из "./AuthContext";
константа useAuthContext.js = () => {
 const user = useContext (AuthContext);
 если (пользователь не определен) {
 выбросить новую ошибку («useAuthContext можно использовать только внутри AuthProvider»);
 }
 вернуть пользователя;
};

Теперь, если код вне провайдера вызывает Аутконтекст, ваше приложение изящно обработает ошибку.

Последним шагом является обертка компонентов с использованием контекста с AuthProvider.js.

импортировать { AuthProvider } из "./AuthContext";
ReactDOM.render(




,
 корневой элемент
);

Вот пример использования контекста для защиты страницы от неавторизованных пользователей.

импортировать useAuthContext из "./useAuthContext";
импортировать {Navigate} из "react-router-dom";
константный профиль = () => {
 const {пользователь} = useAuthContext();
 если (!пользователь) {
 возврат ;
 }
 возврат (
 <>
Профиль

 );
};

Этот компонент условно отображает страницу профиля в зависимости от статуса аутентификации пользователя. Он проверяет, существует ли пользователь, и если нет, перенаправляет его на страницу входа. В противном случае он отображает страницу профиля.

Когда не следует использовать React Context API

В этой статье вы узнали, как использовать Context для отслеживания аутентифицированного пользователя в компонентах. Хотя у вас может возникнуть соблазн использовать Context для всех ваших случаев использования совместного доступа к данным, вы не должны этого делать, так как это снижает удобство сопровождения кода и производительность. Каждый раз, когда значение контекста изменяется, каждый компонент, потребляющий состояние, повторно рендерится. Если данные используются только несколькими компонентами, выберите свойства.

Как использовать реквизиты в ReactJS

Читать дальше

Об авторе