React Context API är ett tillståndshanteringsverktyg som används för att dela data mellan React-komponenter. Ta reda på hur du använder Context API för att hålla reda på autentiserade användare i funktionella komponenter.

Vad är React Context API?

React är ett komponentbaserat bibliotek. Dess applikationer omfattar olika komponenter som fungerar tillsammans. I vissa fall måste din applikation dela data mellan dessa komponenter.

Till exempel kanske du vill dela användarnamnet för den nuvarande användaren från Logga in komponent till andra komponenter i din applikation. Sammanhang gör det lättare att dela användarnamnet genom att eliminera behovet av att skicka data genom varje komponent i komponentträdet.

När ska du använda React Context API?

Innan du använder React context, överväg först vilken typ av data du arbetar med. Kontext är mer lämpad för statisk data. Data som ändras kontinuerligt kommer att orsaka för många omrenderingar och som ett resultat minskar prestandan. Data bör också vara globala eller åtminstone användas av många komponenter, till exempel data som användarspråk, teman och autentisering.

Använda kontext för att hålla reda på användarautentiseringsstatus

Om din applikation använder autentisering kommer många av dess komponenter att behöva känna till den aktuella användarens autentiseringstillstånd. Att vidarebefordra autentiseringsstatusen till varje komponent är redundant och leder till propellborrning så att använda sammanhang är ett bra alternativ.

createContext()

För att komma igång med Context API måste du först skapa det med hjälp av denna syntax.

const Context = React.createContext (defaultValue);

Standardvärdet är onödigt och används vanligtvis för teständamål.

Leverantör

Varje sammanhang har en leverantör som tar emot ett värde som konsumeras av komponenterna som det omsluter. Det tillåter dessa komponenter att prenumerera på kontextändringar.

användContext

useContext() är en Reagera krok som tillåter komponenter att konsumera sammanhang. Du behöver bara passera i sammanhanget.

const contextValue = useContext (Context)

Låt oss nu skapa autentiseringskontexten för att hålla reda på autentiseringstillståndet.

Börja med att skapa en ny fil, AuthContext.js, och lägg till följande.

importera { createContext } från "react";
const AuthContext = createContext();
export standard AuthContext;

Skapa sedan AuthProvider.js och lägg till leverantörsfunktionen.

importera { useState, useEffect } från 'react';
importera { getUser } från './auth.js'
importera AuthContext från './AuthContext'
export const AuthProvider = ({ barn }) => {
 const [användare, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
lämna tillbaka (
{barn}
 );
 };

Här hämtar du den aktuella användaren från en falsk getUser() fungera. I en riktig applikation skulle detta vara din backend-tjänst.

Lagra användaren i det aktuella tillståndet för att hålla reda på eventuella ändringar och skicka sedan användaren till leverantören i värdepropet.

AuthProvider.js tar också emot barnen med tillgång till sammanhanget.

Nästa steg är att skapa en anpassad krok som gör det möjligt för komponenter som lindats med leverantören att komma åt sammanhang.

Skapa en ny fil useAuthContext.js och lägg till följande.

importera AuthContext från "./AuthContext";
const useAuthContext.js = () => {
 const användare = useContext (AuthContext);
 if (användare odefinierad) {
 throw new Error("useAuthContext kan endast användas inuti AuthProvider");
 }
 återvända användare;
};

Nu om koden utanför leverantören ringer AuthContext, kommer din applikation att hantera felet på ett elegant sätt.

Det sista steget är att linda komponenterna med hjälp av sammanhang med AuthProvider.js.

importera { AuthProvider } från "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Här är ett exempel på hur du skulle använda kontext för att skydda en sida från oautentiserade användare.

importera useAuthContext från "./useAuthContext";
importera { Navigera } från "react-router-dom";
const Profil = () => {
 const { användare } = useAuthContext();
 if (!användare) {
 lämna tillbaka ;
 }
 lämna tillbaka (
 <>
Profil

 );
};

Denna komponent villkorligt återger profilsidan beroende på användarens autentiseringsstatus. Den kontrollerar om användaren finns och om de inte gör det, omdirigerar den till inloggningssidan. Annars renderar den profilsidan.

När man inte ska använda React Context API

I den här artikeln lärde du dig hur du använder Context för att hålla reda på en autentiserad användare över komponenter. Även om du kan bli frestad att använda Context för alla dina datadelningsbruk, bör du inte göra det eftersom det minskar kodunderhåll och prestanda. Varje gång kontextvärdet ändras, återrenderas varje komponent som förbrukar tillstånd. Om data bara används av ett fåtal komponenter, välj rekvisita.

Hur man använder rekvisita i ReactJS

Läs Nästa

Om författaren