De React Context API is een statusbeheertool die wordt gebruikt voor het delen van gegevens tussen React-componenten. Ontdek hoe u de Context API kunt gebruiken om geverifieerde gebruikers in functionele componenten bij te houden.

Wat is de React Context-API?

React is een op componenten gebaseerde bibliotheek. De toepassingen ervan omvatten: verschillende componenten die samenwerken. In sommige gevallen moet uw toepassing gegevens over deze componenten delen.

U wilt bijvoorbeeld de gebruikersnaam van de huidige gebruiker delen van de Log in component naar andere componenten in uw toepassing. Context maakt het gemakkelijker om de gebruikersnaam te delen doordat het niet meer nodig is om gegevens door elke component in de componentenstructuur door te geven.

Wanneer moet u de React Context API gebruiken?

Overweeg, voordat u React-context gebruikt, eerst met welk type gegevens u werkt. Context is meer geschikt voor statische gegevens. Gegevens die continu veranderen, zullen te veel re-renders veroorzaken en als gevolg daarvan de prestaties verminderen. De gegevens moeten ook globaal zijn of op zijn minst door veel componenten worden gebruikt, bijvoorbeeld gegevens zoals gebruikerstaal, thema's en authenticatie.

Context gebruiken om de gebruikersauthenticatiestatus bij te houden

Als uw toepassing authenticatie gebruikt, moeten veel van de componenten de authenticatiestatus van de huidige gebruiker weten. Het doorgeven van de authenticatiestatus aan elk onderdeel is overbodig en leidt tot prop Drilling, dus het gebruik van context is een goede optie.

creëerContext()

Om aan de slag te gaan met de Context API, moet u deze eerst maken met behulp van deze syntaxis.

const Context = React.createContext (standaardwaarde);

De standaardwaarde is niet nodig en wordt meestal gebruikt voor testdoeleinden.

Aanbieder

Elke context heeft een provider die een waarde ontvangt die wordt verbruikt door de componenten die erin worden verpakt. Hiermee kunnen deze componenten zich abonneren op contextveranderingen.

gebruikContext

gebruikContext() is een Reageerhaak waardoor componenten context kunnen consumeren. Je hoeft alleen maar in de context te passen.

const contextValue = useContext (Context)

Laten we nu de authenticatiecontext maken om de authenticatiestatus bij te houden.

Begin met het maken van een nieuw bestand, AuthContext.js, en voeg het volgende toe.

importeer { createContext } van "reageren";
const AuthContext = createContext();
export standaard AuthContext;

Maak vervolgens AuthProvider.js en voeg de providerfunctie toe.

importeer { useState, useEffect } van 'react';
importeer { getUser } van './auth.js'
importeer AuthContext van './AuthContext'
export const AuthProvider = ({ kinderen }) => {
 const [gebruiker, setGebruiker] = useState (null);
 gebruikEffect(() => {
 const huidigeGebruiker = getUser()
 setGebruiker (huidige Gebruiker)
 }, []);
opbrengst (
{kinderen}
 );
 };

Hier haalt u de huidige gebruiker op van een nep getUser() functie. In een echte applicatie zou dit uw backend-service zijn.

Sla de gebruiker op in de huidige staat om eventuele wijzigingen bij te houden en geef de gebruiker vervolgens door aan de provider in de waardeprop.

AuthProvider.js ontvangt ook de kinderen met toegang tot de context.

De volgende stap is het maken van een aangepaste hook waarmee componenten die bij de provider zijn verpakt, toegang hebben tot context.

Een nieuw bestand maken useAuthContext.js en voeg het volgende toe.

importeer AuthContext van "./AuthContext";
const useAuthContext.js = () => {
 const gebruiker = useContext (AuthContext);
 if (gebruiker niet gedefinieerd) {
 throw new Error ("useAuthContext kan alleen worden gebruikt binnen AuthProvider");
 }
 terugkerende gebruiker;
};

Nu als code buiten de provider belt AuthContext, zal uw toepassing de fout netjes afhandelen.

De laatste stap is om de componenten in te pakken met behulp van context met AuthProvider.js.

importeer { AuthProvider } van "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Hier is een voorbeeld van hoe u context zou gebruiken om een ​​pagina te beschermen tegen niet-geverifieerde gebruikers.

importeer useAuthContext uit "./useAuthContext";
importeer { Navigeer } van "react-router-dom";
const Profiel = () => {
 const {gebruiker} = useAuthContext();
 als (!gebruiker) {
 opbrengst ;
 }
 opbrengst (
 <>
Profiel

 );
};

Dit onderdeel voorwaardelijk weergegeven de profielpagina, afhankelijk van de authenticatiestatus van de gebruiker. Het controleert of de gebruiker bestaat en zo niet, leidt het door naar de inlogpagina. Anders wordt de profielpagina weergegeven.

Wanneer React Context API niet gebruiken?

In dit artikel hebt u geleerd hoe u Context kunt gebruiken om een ​​geverifieerde gebruiker in verschillende componenten bij te houden. Hoewel je misschien in de verleiding komt om Context te gebruiken voor al je gebruiksscenario's voor het delen van gegevens, zou je dat niet moeten doen, omdat het de onderhoudbaarheid en prestaties van de code vermindert. Elke keer dat de contextwaarde verandert, wordt elk onderdeel dat de status verbruikt opnieuw weergegeven. Als de gegevens maar door een paar componenten worden gebruikt, kies dan voor rekwisieten.

Hoe rekwisieten te gebruiken in ReactJS

Lees volgende

Over de auteur