React Context API er et tilstandsstyringsværktøj, der bruges til at dele data på tværs af React-komponenter. Find ud af, hvordan du bruger Context API til at holde styr på godkendte brugere i funktionelle komponenter.

Hvad er React Context API?

React er et komponentbaseret bibliotek. Dens applikationer omfatter forskellige komponenter der arbejder sammen. I nogle tilfælde skal din applikation dele data på tværs af disse komponenter.

For eksempel vil du måske dele brugernavnet på den aktuelle bruger fra Log på komponent til andre komponenter i din applikation. Sammenhæng gør det nemmere at dele brugernavnet ved at eliminere behovet for at sende data gennem hver komponent i komponenttræet.

Hvornår skal du bruge React Context API?

Inden du bruger React-kontekst, skal du først overveje, hvilken type data du arbejder med. Kontekst er mere velegnet til statiske data. Data, der ændres kontinuerligt, vil forårsage for mange gengivelser og som følge heraf reducere ydeevnen. Dataene bør også være globale eller i det mindste bruges af mange komponenter, for eksempel data såsom brugersprog, temaer og godkendelse.

Brug af kontekst til at holde styr på brugergodkendelsesstatus

Hvis din applikation bruger godkendelse, skal mange af dens komponenter kende den aktuelle brugers godkendelsestilstand. At videregive godkendelsesstatussen til hver komponent er overflødig og fører til propboring, så brug af kontekst er en god mulighed.

createContext()

For at komme i gang med Context API skal du først oprette den ved hjælp af denne syntaks.

const Context = React.createContext (defaultValue);

Standardværdien er unødvendig og bruges normalt til testformål.

Udbyder

Hver kontekst har en udbyder, der modtager en værdi, der forbruges af de komponenter, den omslutter. Det giver disse komponenter mulighed for at abonnere på kontekstændringer.

brug kontekst

useContext() er en Reaktionskrog der tillader komponenter at forbruge kontekst. Du skal kun bestå i sammenhængen.

const contextValue = useContext (Context)

Lad os nu oprette godkendelseskonteksten for at holde styr på godkendelsestilstanden.

Start med at oprette en ny fil, AuthContext.js, og tilføje følgende.

importer { createContext } fra "react";
const AuthContext = createContext();
eksport standard AuthContext;

Dernæst skal du oprette AuthProvider.js og tilføje udbyderfunktionen.

importer { useState, useEffect } fra 'react';
importer { getUser } fra './auth.js'
importer AuthContext fra './AuthContext'
eksport const AuthProvider = ({ børn }) => {
 const [bruger, sætBruger] = useState (nul);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
Vend tilbage (
{børn}
 );
 };

Her henter du den aktuelle bruger fra en falsk getUser() fungere. I en rigtig applikation ville dette være din backend-tjeneste.

Gem brugeren i den aktuelle tilstand for at holde styr på eventuelle ændringer, og send derefter brugeren til udbyderen i værdien.

AuthProvider.js modtager også børnene med adgang til konteksten.

Det næste trin er at oprette en tilpasset hook, der giver komponenter, der er pakket med udbyderen, adgang til kontekst.

Opret en ny fil useAuthContext.js og tilføje følgende.

importer AuthContext fra "./AuthContext";
const useAuthContext.js = () => {
 const bruger = useContext (AuthContext);
 if (bruger udefineret) {
 throw new Error("useAuthContext kan kun bruges inde i AuthProvider");
 }
 returnere bruger;
};

Nu hvis kode uden for udbyderen ringer AuthContext, vil din applikation håndtere fejlen elegant.

Det sidste trin er at pakke komponenterne ved hjælp af kontekst med AuthProvider.js.

importer { AuthProvider } fra "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Her er et eksempel på, hvordan du ville bruge kontekst til at beskytte en side mod uautoriserede brugere.

importer useAuthContext fra "./useAuthContext";
importer { Naviger } fra "react-router-dom";
const Profil = () => {
 const { bruger } = useAuthContext();
 if (!bruger) {
 Vend tilbage ;
 }
 Vend tilbage (
 <>
Profil

 );
};

Denne komponent betinget gengiver profilsiden afhængigt af brugerens godkendelsesstatus. Det tjekker, om brugeren eksisterer, og hvis de ikke gør det, omdirigerer den dem til login-siden. Ellers gengiver den profilsiden.

Hvornår må du ikke bruge React Context API

I denne artikel lærte du, hvordan du bruger kontekst til at holde styr på en godkendt bruger på tværs af komponenter. Selvom du kan blive fristet til at bruge Context til alle dine datadelingsbrug, bør du ikke gøre det, da det reducerer kodevedligeholdelse og ydeevne. Hver gang kontekstværdien ændres, genrenderes hver komponent, der bruger tilstand. Hvis data kun bruges af nogle få komponenter, skal du vælge rekvisitter.

Sådan bruges rekvisitter i ReactJS

Læs Næste

Om forfatteren