Узнайте, как правильно обмениваться данными между несколькими компонентами.
React Context API — это инструмент управления состоянием, используемый для обмена данными между компонентами React. Узнайте, как использовать Context API для отслеживания пользователей, прошедших проверку подлинности, в функциональных компонентах.
Что такое React Context API?
React — это библиотека, основанная на компонентах. Его приложения состоят из различных компонентов, которые работают вместе. В некоторых случаях вашему приложению необходимо обмениваться данными между этими компонентами.
Например, вы можете захотеть поделиться именем пользователя текущего пользователя из компонента входа в систему с другими компонентами вашего приложения. Контекст упрощает совместное использование имени пользователя, устраняя необходимость передачи данных через каждый компонент в дереве компонентов.
Когда следует использовать React Context API?
Прежде чем использовать контекст React, сначала рассмотрите тип данных, с которыми вы работаете. Контекст больше подходит для статических данных. Данные, которые постоянно изменяются, вызовут слишком много повторных рендерингов и, как следствие, снизят производительность. Данные также должны быть глобальными или, по крайней мере, использоваться многими компонентами, например, такие данные, как язык пользователя, темы и аутентификация.
Использование контекста для отслеживания статуса аутентификации пользователя
Если ваше приложение использует аутентификацию, многим его компонентам потребуется знать текущее состояние аутентификации пользователя. Передача статуса аутентификации каждому компоненту является избыточной и приводит к сверлению реквизита, поэтому использование контекста является хорошим вариантом.
createContext()
Чтобы начать работу с Context API, вам сначала нужно создать его, используя этот синтаксис.
const Context = React.createContext(defaultValue);
Значение по умолчанию не является обязательным и обычно используется в целях тестирования.
Provider
У каждого контекста есть провайдер, который получает значение, потребляемое компонентами, которые он обертывает. Это позволяет этим компонентам подписываться на изменения контекста.
<Context.Provider value={/* some value */}>
useContext
useContext() — это хук React, который позволяет компонентам использовать контекст. Вам нужно только пройти в контексте.
const contextValue = useContext(Context)
Давайте теперь создадим контекст аутентификации, чтобы отслеживать состояние аутентификации.
Начните с создания нового файла AuthContext.js и добавьте следующее.
import { createContext } from «react»;
const AuthContext = createContext();
export default AuthContext;
Затем создайте AuthProvider.js и добавьте функцию провайдера.
import { useState, useEffect } from ‘react’;
import { getUser } from ‘./auth.js’
import AuthContext from ‘./AuthContext’
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
const currentUser = getUser()
setUser(currentUser)
}, []);return (
<AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
);
};
Здесь вы извлекаете текущего пользователя из поддельной функции getUser(). В реальном приложении это будет ваш серверный сервис.
Сохраните пользователя в текущем состоянии, чтобы отслеживать любые изменения, а затем передайте пользователя провайдеру в свойстве value.
AuthProvider.js также получает дочерние элементы с доступом к контексту.
Следующим шагом является создание пользовательского хука, который позволит компонентам, упакованным с провайдером, получить доступ к контексту.
Создайте новый файл useAuthContext.js и добавьте следующее.
import AuthContext from «./AuthContext»;
const useAuthContext.js = () => {
const user = useContext(AuthContext);
if (user === undefined) {
throw new Error(«useAuthContext can only be used inside AuthProvider»);
}
return user;
};
Теперь, если код за пределами провайдера вызывает AuthContext, ваше приложение изящно обработает ошибку.
Последний шаг — обернуть компоненты, используя контекст с AuthProvider.js.
import { AuthProvider } from «./AuthContext»;
ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>,
rootElement
);
Вот пример использования контекста для защиты страницы от неавторизованных пользователей.
import useAuthContext from «./useAuthContext»;
import { Navigate } from «react-router-dom»;
const Profile = () => {
const { user } = useAuthContext();
if (!user) {
return <Navigate replace to=»/login» />;
}
return (
<>
<h1>Profile</h1>
</>
);
};
Этот компонент условно отображает страницу профиля в зависимости от статуса аутентификации пользователя. Он проверяет, существует ли пользователь, и если нет, перенаправляет его на страницу входа. В противном случае он отображает страницу профиля.
Когда не следует использовать React Context API
В этой статье вы узнали, как использовать Context для отслеживания аутентифицированного пользователя в компонентах. Хотя у вас может возникнуть соблазн использовать Context для всех ваших случаев использования совместного доступа к данным, вы не должны этого делать, так как это снижает удобство сопровождения кода и производительность. Каждый раз, когда значение контекста изменяется, каждый компонент, потребляющий состояние, повторно рендерится. Если данные используются только несколькими компонентами, выберите свойства.
