„React Context“ API yra būsenos valdymo įrankis, naudojamas dalytis duomenimis tarp „React“ komponentų. Sužinokite, kaip naudoti konteksto API, kad galėtumėte sekti autentifikuotus vartotojus funkciniuose komponentuose.

Kas yra React Context API?

„React“ yra komponentais pagrįsta biblioteka. Jo programos apima skirtingi komponentai kurie dirba kartu. Kai kuriais atvejais jūsų programa turi bendrinti šių komponentų duomenis.

Pavyzdžiui, galbūt norėsite bendrinti dabartinio vartotojo vartotojo vardą iš Prisijungti komponentą su kitais jūsų programos komponentais. Kontekstas palengvina naudotojo vardo bendrinimą, nes nebereikia perduoti duomenų per kiekvieną komponentų medžio komponentą.

Kada turėtumėte naudoti „React Context API“?

Prieš naudodami React kontekstą, pirmiausia apsvarstykite duomenų tipą, su kuriuo dirbate. Kontekstas labiau tinka statiniams duomenims. Nuolat besikeičiantys duomenys sukels per daug pakartotinių pateikimų ir dėl to sumažės našumas. Duomenys taip pat turėtų būti visuotiniai arba bent jau naudojami daugelyje komponentų, pavyzdžiui, tokie duomenys kaip vartotojo kalba, temos ir autentifikavimas.

Konteksto naudojimas norint sekti vartotojo autentifikavimo būseną

Jei jūsų programa naudoja autentifikavimą, daugelis jos komponentų turės žinoti esamo vartotojo autentifikavimo būseną. Autentifikavimo būsenos perdavimas kiekvienam komponentui yra perteklinis ir veda į rekvizitus, todėl konteksto naudojimas yra geras pasirinkimas.

CreateContext()

Norėdami pradėti naudoti konteksto API, pirmiausia turite ją sukurti naudodami šią sintaksę.

const Context = React.createContext (defaultValue);

Numatytoji vertė yra nereikalinga ir paprastai naudojama testavimo tikslais.

Teikėjas

Kiekvienas kontekstas turi teikėją, kuris gauna vertę, kurią sunaudoja jo apvyniojami komponentai. Tai leidžia šiems komponentams užsiprenumeruoti konteksto pokyčius.

useContext

useContext() yra Reagavimo kabliukas kuri leidžia komponentams vartoti kontekstą. Reikia tik perduoti kontekste.

const contextValue = useContext (kontekstas)

Dabar sukurkime autentifikavimo kontekstą, kad galėtume sekti autentifikavimo būseną.

Pradėkite kurdami naują failą, AuthContext.js, ir pridėkite toliau nurodytus dalykus.

importuoti { createContext } iš "react";
const AuthContext = createContext();
eksportuoti numatytąjį AuthContext;

Toliau sukurkite AuthProvider.js ir pridėkite teikėjo funkciją.

importuoti { useState, useEffect } iš 'react';
importuoti { getUser } iš './auth.js'
importuoti „AuthContext“ iš „./AuthContext“
export const AuthProvider = ({ vaikai }) => {
 const [vartotojas, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
grįžti (
{vaikai}
 );
 };

Čia jūs gaunate dabartinį vartotoją iš padirbto getUser () funkcija. Tikroje programoje tai būtų jūsų užpakalinė paslauga.

Išsaugokite naudotoją dabartinės būsenos, kad galėtumėte stebėti bet kokius pakeitimus, tada perduokite naudotoją teikėjui vertės pasiūlyme.

AuthProvider.js taip pat gauna vaikams prieigą prie konteksto.

Kitas žingsnis yra sukurti pasirinktinį kabliuką, kuris leis komponentams, sujungtiems su teikėju, pasiekti kontekstą.

Sukurkite naują failą useAuthContext.js ir pridėkite toliau nurodytus dalykus.

importuoti AuthContext iš "./AuthContext";
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (vartotojas neapibrėžtas) {
 throw new Error ("useAuthContext gali būti naudojamas tik AuthProvider");
 }
 grįžti vartotojas;
};

Dabar, jei kodas skambina už teikėjo ribų AuthContext, jūsų programa puikiai išspręs klaidą.

Paskutinis veiksmas yra apvynioti komponentus naudojant kontekstą su AuthProvider.js.

importuoti { AuthProvider } iš "./AuthContext";
ReactDOM.render(




,
 šakninis elementas
);

Štai pavyzdys, kaip galėtumėte naudoti kontekstą, kad apsaugotumėte puslapį nuo neautentifikuotų vartotojų.

importuoti useAuthContext iš "./useAuthContext";
importuoti { Navigate } iš "react-router-dom";
const profilis = () => {
 const { vartotojas } = useAuthContext();
 if (!user) {
 grąžinti ;
 }
 grįžti (
 <>
Profilis

 );
};

Šis komponentas sąlyginai pateikia profilio puslapį, atsižvelgiant į vartotojo autentifikavimo būseną. Ji patikrina, ar vartotojas egzistuoja, o jei ne, nukreipia jį į prisijungimo puslapį. Kitu atveju jis atvaizduoja profilio puslapį.

Kada nenaudoti React Context API

Šiame straipsnyje sužinojote, kaip naudoti kontekstą, kad galėtumėte stebėti autentifikuotą vartotoją visuose komponentuose. Nors jums gali kilti pagunda naudoti kontekstą visais dalijimosi duomenimis atvejais, to neturėtumėte, nes tai sumažina kodo priežiūrą ir našumą. Kiekvieną kartą, kai keičiasi konteksto reikšmė, kiekvienas komponentas, kuris naudoja būseną, perteikiamas. Jei duomenis naudoja tik keli komponentai, rinkitės rekvizitus.

Kaip naudoti rekvizitus „ReactJS“.

Skaitykite toliau

Apie autorių