Die React Context API ist ein Zustandsverwaltungstool, das zum Teilen von Daten zwischen React-Komponenten verwendet wird. Erfahren Sie, wie Sie die Kontext-API verwenden, um authentifizierte Benutzer in funktionalen Komponenten nachzuverfolgen.

Was ist die React-Kontext-API?

React ist eine komponentenbasierte Bibliothek. Seine Anwendungen umfassen verschiedene Komponenten die zusammenarbeiten. In einigen Fällen muss Ihre Anwendung Daten über diese Komponenten hinweg gemeinsam nutzen.

Beispielsweise möchten Sie möglicherweise den Benutzernamen des aktuellen Benutzers von teilen Anmeldung Komponente zu anderen Komponenten in Ihrer Anwendung. Kontext erleichtert die gemeinsame Nutzung des Benutzernamens, da Daten nicht mehr durch jede Komponente im Komponentenbaum geleitet werden müssen.

Wann sollten Sie die React Context API verwenden?

Bevor Sie den React-Kontext verwenden, sollten Sie zunächst die Art der Daten berücksichtigen, mit denen Sie arbeiten. Kontext eignet sich besser für statische Daten. Daten, die sich kontinuierlich ändern, führen zu zu vielen Neuberechnungen und verringern dadurch die Leistung. Die Daten sollten auch global sein oder zumindest von vielen Komponenten verwendet werden, beispielsweise Daten wie Benutzersprache, Themen und Authentifizierung.

Verwenden des Kontexts zum Verfolgen des Benutzerauthentifizierungsstatus

Wenn Ihre Anwendung Authentifizierung verwendet, müssen viele ihrer Komponenten den Authentifizierungsstatus des aktuellen Benutzers kennen. Das Weitergeben des Authentifizierungsstatus an jede Komponente ist überflüssig und führt zu Prop Drilling, daher ist die Verwendung von Kontext eine gute Option.

createContext()

Um mit der Kontext-API zu beginnen, müssen Sie sie zunächst mit dieser Syntax erstellen.

const Context = React.createContext (Standardwert);

Der Standardwert ist unnötig und wird normalerweise zu Testzwecken verwendet.

Anbieter

Jeder Kontext verfügt über einen Anbieter, der einen Wert empfängt, der von den Komponenten verwendet wird, die er umschließt. Es ermöglicht diesen Komponenten, Kontextänderungen zu abonnieren.

useContext

useContext() ist ein Haken reagieren die es Komponenten ermöglicht, Kontext zu konsumieren. Sie müssen nur den Kontext übergeben.

const contextValue = useContext (Kontext)

Lassen Sie uns nun den Authentifizierungskontext erstellen, um den Authentifizierungsstatus zu verfolgen.

Beginnen Sie mit dem Erstellen einer neuen Datei, AuthContext.js, und füge folgendes hinzu.

importiere { createContext } aus "reagieren";
const AuthContext = createContext();
Standard-AuthContext exportieren;

Als nächstes erstellen AuthProvider.js und fügen Sie die Anbieterfunktion hinzu.

import { useState, useEffect } from 'react';
importiere { getUser } aus './auth.js'
AuthContext aus './AuthContext' importieren
export const AuthProvider = ({ children }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 const aktuellerBenutzer = getUser()
 setUser (aktueller Benutzer)
 }, []);
Rückkehr (
{Kinder}
 );
 };

Hier rufen Sie den aktuellen Benutzer von einer Fälschung ab getUser() Funktion. In einer echten Anwendung wäre dies Ihr Back-End-Dienst.

Speichern Sie den Benutzer im aktuellen Status, um alle Änderungen nachzuverfolgen, und übergeben Sie den Benutzer dann an den Anbieter im Wertprop.

AuthProvider.js erhält auch die Kinder mit Zugang zum Kontext.

Der nächste Schritt besteht darin, einen benutzerdefinierten Hook zu erstellen, der es Komponenten ermöglicht, die mit dem Anbieter umschlossen sind, auf den Kontext zuzugreifen.

Erstellen Sie eine neue Datei useAuthContext.js und füge folgendes hinzu.

AuthContext aus "./AuthContext" importieren;
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (Benutzer undefiniert) {
 throw new Error("useAuthContext kann nur innerhalb von AuthProvider verwendet werden");
 }
 Benutzer zurückgeben;
};

Wenn Code jetzt außerhalb des Providers anruft AuthContext, wird Ihre Anwendung den Fehler ordnungsgemäß behandeln.

Der letzte Schritt besteht darin, die Komponenten mithilfe von Kontext mit einzuschließen AuthProvider.js.

importiere { AuthProvider } aus "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Hier ist ein Beispiel dafür, wie Sie den Kontext verwenden würden, um eine Seite vor nicht authentifizierten Benutzern zu schützen.

useAuthContext aus "./useAuthContext" importieren;
Importieren Sie {Navigieren} aus "React-Router-Dom";
konstantes Profil = () => {
 const {Benutzer} = useAuthContext();
 if (!Benutzer) {
 Rückkehr ;
 }
 Rückkehr (
 <>
Profil

 );
};

Diese Komponente bedingt macht die Profilseite abhängig vom Authentifizierungsstatus des Benutzers. Es prüft, ob der Benutzer existiert und leitet ihn, falls nicht, auf die Anmeldeseite weiter. Andernfalls wird die Profilseite gerendert.

Wann man die React Context API nicht verwenden sollte

In diesem Artikel haben Sie gelernt, wie Sie Context verwenden, um einen authentifizierten Benutzer komponentenübergreifend nachzuverfolgen. Auch wenn Sie versucht sein könnten, Context für alle Ihre Anwendungsfälle für die gemeinsame Nutzung von Daten zu verwenden, sollten Sie dies nicht tun, da dies die Wartbarkeit und Leistung des Codes beeinträchtigt. Jedes Mal, wenn sich der Kontextwert ändert, wird jede Komponente, die den Zustand verbraucht, neu gerendert. Wenn die Daten nur von wenigen Komponenten verwendet werden, entscheiden Sie sich für Requisiten.

So verwenden Sie Requisiten in ReactJS

Lesen Sie weiter

Über den Autor