React Context API to narzędzie do zarządzania stanem służące do udostępniania danych między komponentami React. Dowiedz się, jak używać interfejsu API kontekstu do śledzenia uwierzytelnionych użytkowników w komponentach funkcjonalnych.

Co to jest interfejs API kontekstu React?

React to biblioteka oparta na komponentach. Jego aplikacje obejmują: różne składniki które działają razem. W niektórych przypadkach aplikacja musi udostępniać dane między tymi składnikami.

Na przykład możesz chcieć udostępnić nazwę bieżącego użytkownika z Zaloguj sie składnik do innych składników w aplikacji. Kontekst ułatwia udostępnianie nazwy użytkownika, eliminując potrzebę przekazywania danych przez każdy komponent w drzewie komponentów.

Kiedy należy używać React Context API?

Przed użyciem kontekstu React najpierw zastanów się nad typem danych, z którymi pracujesz. Kontekst jest bardziej odpowiedni dla danych statycznych. Ciągle zmieniające się dane spowodują zbyt wiele ponownych renderowań, a w rezultacie zmniejszą wydajność. Dane powinny być również globalne lub przynajmniej wykorzystywane przez wiele komponentów, na przykład dane takie jak język użytkownika, motywy i uwierzytelnianie.

Używanie kontekstu do śledzenia statusu uwierzytelniania użytkownika

Jeśli Twoja aplikacja korzysta z uwierzytelniania, wiele jej składników będzie musiało znać stan uwierzytelniania bieżącego użytkownika. Przekazywanie statusu uwierzytelniania do każdego komponentu jest zbędne i prowadzi do drążenia rekwizytów, więc użycie kontekstu jest dobrą opcją.

utwórzKontekst()

Aby rozpocząć korzystanie z Context API, musisz najpierw utworzyć go przy użyciu tej składni.

const Context = React.createContext (wartość domyślna);

Wartość domyślna jest zbędna i jest zwykle używana do celów testowych.

Dostawca

Każdy kontekst ma dostawcę, który otrzymuje wartość zużywaną przez składniki, które otacza. Pozwala tym komponentom na subskrybowanie zmian kontekstu.

useContext

użyj kontekstu() jest Reaguj hak który umożliwia komponentom korzystanie z kontekstu. Musisz tylko przekazać w kontekście.

const contextValue = useContext (kontekst)

Stwórzmy teraz kontekst uwierzytelniania, aby śledzić stan uwierzytelniania.

Zacznij od stworzenia nowego pliku, AuthContext.js, i dodaj następujące.

import { createContext } z "react";
const AuthContext = utwórzKontekst();
eksportuj domyślny AuthContext;

Następnie utwórz AuthProvider.js i dodaj funkcję dostawcy.

import { useState, useEffect } z 'react';
importuj { getUser } z './auth.js'
importuj AuthContext z „./AuthContext”
export const AuthProvider = ({ dzieci }) => {
 const [użytkownik, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (bieżący użytkownik)
 }, []);
zwrócić (
{dzieci}
 );
 };

Tutaj odzyskujesz bieżącego użytkownika z fałszywego pobierzUżytkownika() funkcjonować. W prawdziwej aplikacji byłaby to Twoja usługa zaplecza.

Przechowuj użytkownika w bieżącym stanie, aby śledzić wszelkie zmiany, a następnie przekaż użytkownika do dostawcy we właściwości wartości.

AuthProvider.js otrzymuje również dzieci z dostępem do kontekstu.

Następnym krokiem jest utworzenie niestandardowego hooka, który umożliwi komponentom opakowanym z dostawcą dostęp do kontekstu.

Utwórz nowy plik useAuthContext.js i dodaj następujące.

importuj AuthContext z "./AuthContext";
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 jeśli (użytkownik niezdefiniowany) {
 throw new Error("useAuthContext można używać tylko wewnątrz AuthProvider");
 }
 użytkownik powrotny;
};

Teraz, jeśli kod spoza dostawcy dzwoni AuthContext, aplikacja z wdziękiem obsłuży błąd.

Ostatnim krokiem jest zawinięcie komponentów za pomocą kontekstu z AuthProvider.js.

import { AuthProvider } z "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Oto przykład wykorzystania kontekstu do ochrony strony przed nieuwierzytelnionymi użytkownikami.

importuj useAuthContext z "./useAuthContext";
importuj { Nawiguj } z "react-router-dom";
const Profil = () => {
 const { użytkownik } = useAuthContext();
 jeśli (!użytkownik) {
 zwrócić ;
 }
 zwrócić (
 <>
Profil

 );
};

Ten składnik renderuje warunkowo stronę profilu w zależności od statusu uwierzytelnienia użytkownika. Sprawdza, czy użytkownik istnieje, a jeśli nie, przekierowuje go na stronę logowania. W przeciwnym razie renderuje stronę profilu.

Kiedy nie używać interfejsu React Context API

W tym artykule dowiedziałeś się, jak używać kontekstu do śledzenia uwierzytelnionego użytkownika w różnych składnikach. Chociaż możesz pokusić się o użycie Context we wszystkich przypadkach użycia udostępniania danych, nie powinieneś tego robić, ponieważ zmniejsza to łatwość konserwacji i wydajność kodu. Za każdym razem, gdy wartość kontekstu zmienia każdy składnik, który zużywa stan, jest ponownie renderowany. Jeśli dane są używane tylko przez kilka komponentów, wybierz rekwizyty.

Jak używać rekwizytów w ReactJS

Czytaj dalej

O autorze