React Context API je orodje za upravljanje stanja, ki se uporablja za skupno rabo podatkov med komponentami React. Ugotovite, kako uporabiti Context API za spremljanje overjenih uporabnikov v funkcionalnih komponentah.

Kaj je React Context API?

React je knjižnica, ki temelji na komponentah. Njegove aplikacije obsegajo različne komponente ki delujejo skupaj. V nekaterih primerih mora vaša aplikacija deliti podatke med temi komponentami.

Morda boste želeli na primer deliti uporabniško ime trenutnega uporabnika iz Vpiši se komponento drugim komponentam v vaši aplikaciji. Kontekst olajša skupno rabo uporabniškega imena z odpravo potrebe po posredovanju podatkov skozi vsako komponento v drevesu komponent.

Kdaj bi morali uporabiti React Context API?

Preden uporabite kontekst React, najprej razmislite o vrsti podatkov, s katerimi delate. Kontekst je bolj primeren za statične podatke. Podatki, ki se nenehno spreminjajo, bodo povzročili preveč ponovnih upodabljanj in posledično zmanjšali zmogljivost. Podatki morajo biti tudi globalni ali jih vsaj uporabljajo številne komponente, na primer podatki, kot so uporabniški jezik, teme in preverjanje pristnosti.

Uporaba konteksta za spremljanje statusa preverjanja pristnosti uporabnika

Če vaša aplikacija uporablja preverjanje pristnosti, bodo mnoge njene komponente morale poznati trenutno stanje preverjanja pristnosti uporabnika. Posredovanje statusa preverjanja pristnosti na vsako komponento je odveč in vodi do vrtanja podpornikov, zato je uporaba konteksta dobra možnost.

createContext()

Če želite začeti uporabljati Context API, ga morate najprej ustvariti s to sintakso.

const Kontekst = React.createContext (privzeta vrednost);

Privzeta vrednost je nepotrebna in se običajno uporablja za namene testiranja.

Ponudnik

Vsak kontekst ima ponudnika, ki prejme vrednost, ki jo porabijo komponente, ki jih ovije. Tem komponentam omogoča, da se naročijo na spremembe konteksta.

useContext

useContext() je React kavelj ki komponentam omogoča uporabo konteksta. Prenesti morate samo v kontekstu.

const contextValue = useContext (kontekst)

Zdaj ustvarimo kontekst za preverjanje pristnosti, da spremljamo stanje preverjanja pristnosti.

Začnite z ustvarjanjem nove datoteke, AuthContext.js, in dodajte naslednje.

import { createContext } iz "react";
const AuthContext = createContext();
izvoz privzetega AuthContext;

Nato ustvarite AuthProvider.js in dodajte funkcijo ponudnika.

import { useState, useEffect } iz 'react';
uvozi { getUser } iz './auth.js'
uvozi AuthContext iz './AuthContext'
izvoz konst AuthProvider = ({ otrok }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (trenutniUser)
 }, []);
vrnitev (
{otroci}
 );
 };

Tukaj pridobivate trenutnega uporabnika iz ponaredka getUser() funkcijo. V pravi aplikaciji bi bila to vaša zaledna storitev.

Shranite uporabnika v trenutnem stanju, da spremljate morebitne spremembe, nato pa uporabnika posredujte ponudniku v vrednosti prop.

AuthProvider.js sprejema tudi otroke z dostopom do konteksta.

Naslednji korak je ustvariti kavelj po meri, ki bo komponentam, zavitim s ponudnikom, omogočil dostop do konteksta.

Ustvarite novo datoteko useAuthContext.js in dodajte naslednje.

uvozite AuthContext iz "./AuthContext";
const useAuthContext.js = () => {
 const uporabnik = useContext (AuthContext);
 če (uporabnik ni definiran) {
 throw new Error("useAuthContext se lahko uporablja samo znotraj AuthProvider");
 }
 povratni uporabnik;
};

Zdaj, če kliče koda zunaj ponudnika AuthContext, bo vaša aplikacija napako obravnavala elegantno.

Zadnji korak je ovijanje komponent z uporabo konteksta s AuthProvider.js.

uvoz { AuthProvider } iz "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Tukaj je primer, kako bi uporabili kontekst za zaščito strani pred nepreverjenimi uporabniki.

uvozite useAuthContext iz "./useAuthContext";
uvoz { Navigate } iz "react-router-dom";
const profil = () => {
 const {uporabnik} = useAuthContext();
 če (!uporabnik) {
 vrnitev ;
 }
 vrnitev (
 <>
Profil

 );
};

Ta komponenta pogojno upodablja stran profila glede na status avtentikacije uporabnika. Preveri, ali uporabnik obstaja, in če ne, ga preusmeri na stran za prijavo. V nasprotnem primeru upodablja stran profila.

Kdaj ne uporabljati React Context API

V tem članku ste se naučili, kako uporabljati Context za spremljanje overjenega uporabnika med komponentami. Čeprav bi vas morda zamikalo, da bi uporabili Context za vse primere uporabe skupne rabe podatkov, je ne bi smeli, saj zmanjšuje vzdržljivost in zmogljivost kode. Vsakič, ko se vrednost konteksta spremeni vsako komponento, ki porabi ponovno upodabljanje stanja. Če podatke uporablja le nekaj komponent, se odločite za rekvizite.

Kako uporabljati rekvizite v ReactJS

Preberite Naprej

O avtorju