Введение в API контекста React

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

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

Что такое API контекста React?

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

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

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

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

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

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

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

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

const Context = React.createContext(defaultValue);

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

Поставщик

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

<Context.Provider value={/* some value */}>

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

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 для всех случаев совместного использования данных, не следует этого делать, поскольку это снижает удобство сопровождения кода и производительность. Каждый раз, когда значение контекста меняется, каждый компонент, который использует повторную визуализацию состояния. Если данные используются только несколькими компонентами, выберите реквизит.