React Context API on olekuhaldustööriist, mida kasutatakse andmete jagamiseks Reacti komponentide vahel. Siit saate teada, kuidas kasutada konteksti API-t, et jälgida funktsionaalsetes komponentides autentitud kasutajaid.

Mis on React Context API?

React on komponendipõhine raamatukogu. Selle rakendused hõlmavad erinevad komponendid mis töötavad koos. Mõnel juhul peab teie rakendus jagama andmeid nende komponentide vahel.

Näiteks võite soovida jagada praeguse kasutaja kasutajanime saidilt Logi sisse komponendiga teie rakenduse teistele komponentidele. Sisu muudab kasutajanime jagamise lihtsamaks, kaotades vajaduse komponendipuu iga komponendi kaudu andmeid edastada.

Millal peaksite kasutama React Context API-t?

Enne Reacti konteksti kasutamist kaaluge esmalt kasutatavate andmete tüüpi. Kontekst sobib rohkem staatiliste andmete jaoks. Pidevalt muutuvad andmed põhjustavad liiga palju kordusrenderdusi ja selle tulemusena väheneb jõudlus. Andmed peaksid olema ka globaalsed või neid peavad kasutama vähemalt paljud komponendid, näiteks sellised andmed nagu kasutaja keel, teemad ja autentimine.

Konteksti kasutamine kasutaja autentimise oleku jälgimiseks

Kui teie rakendus kasutab autentimist, peavad paljud selle komponendid teadma praeguse kasutaja autentimise olekut. Autentimisoleku edasiandmine igale komponendile on üleliigne ja viib tugipuurimiseni, seega on konteksti kasutamine hea valik.

createContext()

Konteksti API-ga alustamiseks peate selle esmalt selle süntaksi abil looma.

const Kontekst = React.createContext (defaultValue);

Vaikeväärtus ei ole vajalik ja seda kasutatakse tavaliselt testimise eesmärgil.

Pakkuja

Igal kontekstil on teenusepakkuja, kes saab selle ümbritsetud komponentide tarbitava väärtuse. See võimaldab neil komponentidel tellida kontekstimuutusi.

useContext

useContext() on Reageerimiskonks mis võimaldab komponentidel konteksti tarbida. Peate läbima ainult kontekstis.

const kontekstValue = useContext (kontekst)

Loome nüüd autentimiskonteksti, et jälgida autentimisolekut.

Alustage uue faili loomisega, AuthContext.js, ja lisage järgmine.

import { createContext } "reactist";
const AuthContext = createContext();
eksportida vaikimisi AuthContext;

Järgmisena looge AuthProvider.js ja lisage teenusepakkuja funktsioon.

import { useState, useEffect } alates 'react';
import { getUser } saidist './auth.js'
importida AuthContext kohast './AuthContext'
export const AuthProvider = ({ lapsed }) => {
 const [kasutaja, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (praegune kasutaja)
 }, []);
tagasi (
{lapsed}
 );
 };

Siin otsite praeguse kasutaja võltsilt getUser() funktsiooni. Päris rakenduses oleks see teie taustateenus.

Salvestage kasutaja praeguses olekus, et jälgida muudatusi, seejärel edastage kasutaja väärtuse proportsioonis pakkujale.

AuthProvider.js saab ka lapsed, kellel on juurdepääs kontekstile.

Järgmine samm on kohandatud konksu loomine, mis võimaldab pakkujaga pakitud komponentidele juurdepääsu kontekstile.

Looge uus fail useAuthContext.js ja lisage järgmine.

importida AuthContext failist "./AuthContext";
const useAuthContext.js = () => {
 const kasutaja = useContext (AuthContext);
 if (kasutaja määramata) {
 throw new Error("useAuthContexti saab kasutada ainult AuthProvideris");
 }
 tagasikasutaja;
};

Kui nüüd helistab kood väljaspool teenusepakkujat AuthContext, käsitleb teie rakendus viga elegantselt.

Viimane samm on komponentide pakkimine konteksti kasutades AuthProvider.js.

import { AuthProvider } kohast "./AuthContext";
ReactDOM.render(




,
 juurelement
);

Siin on näide selle kohta, kuidas saaksite konteksti kasutada lehe kaitsmiseks autentimata kasutajate eest.

importida useAuthContext failist "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profiil = () => {
 const { kasutaja } = useAuthContext();
 if (!kasutaja) {
 tagasi ;
 }
 tagasi (
 <>
Profiil

 );
};

See komponent tinglikult renderdab profiilileht sõltuvalt kasutaja autentimisolekust. See kontrollib, kas kasutaja on olemas ja kui ei ole, suunab ta sisselogimislehele. Vastasel juhul renderdab see profiililehe.

Millal mitte kasutada React Context API-t?

Sellest artiklist õppisite, kuidas kasutada konteksti autentitud kasutaja jälgimiseks kõigis komponentides. Ehkki teil võib tekkida kiusatus kasutada konteksti kõigil andmete jagamise kasutusjuhtudel, ei tohiks te seda teha, kuna see vähendab koodi hooldatavust ja jõudlust. Iga kord, kui konteksti väärtus muutub, iga komponent, mis olekut tarbib, renderdab uuesti. Kui andmeid kasutavad vaid mõned komponendid, valige rekvisiidid.

Kuidas kasutada ReactJS-is rekvisiite

Loe edasi

Autori kohta