ReactContext API är ett tillståndshanteringsverktyg som används för att dela data mellan React-komponenter. Lär dig hur du använder Context API för att hålla reda på autentiserade användare över funktionella komponenter.
Vad är React Context API?
React är ett komponentbaserat bibliotek. Dess applikationer inkluderar olika komponenter som fungerar tillsammans. I vissa fall måste din applikation dela data mellan dessa komponenter.
Du kanske till exempel vill dela användarnamnet för den aktuella användaren från inloggningskomponenten till andra komponenter i din applikation. Kontext gör det enkelt att dela användarnamn 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. Referens är mer lämplig för statisk data. Data som ständigt förändras kommer att orsaka många omrenderingar och som ett resultat försämrar prestandan. Data måste också vara globala eller åtminstone användas av flera komponenter, till exempel data som användarspråk, tema och autentisering.
Använder 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 autentiseringsstatus. Att godkänna certifieringsstatusen för varje komponent är redundant och leder till propellborrning, så att använda en referens är ett bra alternativ.
Här hämtar du den aktuella användaren från den falska getUser()-funktionen. I en riktig applikation skulle detta vara din backend-tjänst.
För att hålla reda på eventuella ändringar lagra användaren i det aktuella tillståndet och skicka sedan användaren till leverantören i en värdeprop.
AuthProvider.js får också barn med tillgång till sammanhanget.
Nästa steg är att skapa en anpassad krok som gör att komponenterna som lindats med leverantören kan komma åt sammanhanget.
Om nu kod utanför leverantören anropar AuthContext, kommer din applikation att hantera felet på ett elegant sätt.
Det sista steget är att linda komponenterna med hjälp av Context med AuthProvider.js.
Här är ett exempel på hur du skulle använda kontext för att skydda en sida från obehöriga användare.
Den här komponenten återger profilsidan villkorligt baserat på användarens autentiseringsstatus. Den kontrollerar om användaren finns och omdirigerar dem till inloggningssidan om de inte gör det. Annars presenterar den profilsidan.
När ska du inte använda React Context API
I den här artikeln lärde du dig hur du använder sammanhang för att hålla reda på en autentiserad användare över alla komponenter. Även om du kan bli frestad att använda Context för alla dina användningsfall för datadelning, bör du inte göra det eftersom det minskar kodunderhåll och prestanda.
Varje gång referensvärdet ändras varje komponent som förbrukar återrenderingen av tillståndet. Om data endast används av vissa komponenter, välj rekvisita.