React Context API ir stāvokļa pārvaldības rīks, ko izmanto datu kopīgošanai starp React komponentiem. Uzziniet, kā izmantot konteksta API, lai izsekotu autentificētiem lietotājiem funkcionālajos komponentos.

Kas ir React Context API?

React ir uz komponentiem balstīta bibliotēka. Tās lietojumprogrammas ietver dažādas sastāvdaļas kas strādā kopā. Dažos gadījumos jūsu lietojumprogrammai ir jākopīgo dati par šiem komponentiem.

Piemēram, iespējams, vēlēsities kopīgot pašreizējā lietotāja lietotājvārdu no Pieslēgties komponentu citiem jūsu lietojumprogrammas komponentiem. Konteksts atvieglo lietotājvārda koplietošanu, novēršot nepieciešamību nodot datus caur katru komponentu koka komponentu.

Kad jums vajadzētu izmantot React Context API?

Pirms React konteksta izmantošanas vispirms apsveriet, ar kādu datu veidu strādājat. Konteksts ir vairāk piemērots statiskiem datiem. Dati, kas nepārtraukti mainās, izraisīs pārāk daudz atkārtotas renderēšanas, un rezultātā samazināsies veiktspēja. Datiem jābūt arī globāliem vai vismaz daudziem komponentiem, piemēram, tādiem datiem kā lietotāja valoda, motīvi un autentifikācija.

Konteksta izmantošana, lai izsekotu lietotāja autentifikācijas statusam

Ja jūsu lietojumprogramma izmanto autentifikāciju, daudziem tās komponentiem būs jāzina pašreizējā lietotāja autentifikācijas stāvoklis. Autentifikācijas statusa nodošana katram komponentam ir lieka un noved pie atbalsta urbšanas, tāpēc konteksta izmantošana ir laba izvēle.

izveidotContext()

Lai sāktu darbu ar konteksta API, vispirms tas ir jāizveido, izmantojot šo sintaksi.

const Context = React.createContext (defaultValue);

Noklusējuma vērtība nav nepieciešama, un to parasti izmanto testēšanas nolūkos.

nodrošinātājs

Katram kontekstam ir nodrošinātājs, kas saņem vērtību, ko patērē tajā ietvertie komponenti. Tas ļauj šiem komponentiem abonēt konteksta izmaiņas.

useContext

useContext() ir Reakcijas āķis kas ļauj komponentiem patērēt kontekstu. Vajag tikai nokārtot kontekstā.

const contextValue = useContext (konteksts)

Tagad izveidosim autentifikācijas kontekstu, lai sekotu līdzi autentifikācijas stāvoklim.

Sāciet, izveidojot jaunu failu, AuthContext.js, un pievienojiet tālāk norādīto.

importēt { CreateContext } no "react";
const AuthContext = createContext();
eksportēt noklusējuma AuthContext;

Tālāk izveidojiet AuthProvider.js un pievienojiet pakalpojumu sniedzēja funkciju.

importēt { useState, useEffect } no 'react';
importēt { getUser } no './auth.js'
importēt AuthContext no './AuthContext'
export const AuthProvider = ({ bērni }) => {
 const [lietotājs, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
atgriezties (
{bērni}
 );
 };

Šeit jūs izgūstat pašreizējo lietotāju no viltus getUser() funkcija. Reālā lietojumprogrammā tas būtu jūsu aizmugures pakalpojums.

Saglabājiet lietotāju pašreizējā stāvoklī, lai izsekotu visām izmaiņām, un pēc tam nododiet lietotāju pakalpojumu sniedzējam vērtības piedāvājumā.

AuthProvider.js saņem arī bērnus ar piekļuvi kontekstam.

Nākamais solis ir izveidot pielāgotu āķi, kas ļaus komponentiem, kas ietīti ar pakalpojumu sniedzēju, piekļūt kontekstam.

Izveidojiet jaunu failu useAuthContext.js un pievienojiet tālāk norādīto.

importēt AuthContext no "./AuthContext";
const useAuthContext.js = () => {
 const lietotājs = useContext (AuthContext);
 if (lietotājs nav definēts) {
 throw new Error ("useAuthContext var izmantot tikai AuthProvider");
 }
 atgriezties lietotājs;
};

Tagad, ja zvana kods ārpus pakalpojumu sniedzēja AuthContext, jūsu lietojumprogramma graciozi apstrādās kļūdu.

Pēdējais solis ir ietīt komponentus, izmantojot kontekstu ar AuthProvider.js.

importēt {AuthProvider} no "./AuthContext";
ReactDOM.render(




,
 saknes elements
);

Šeit ir piemērs, kā izmantot kontekstu, lai aizsargātu lapu no neautentificētiem lietotājiem.

importēt useAuthContext no "./useAuthContext";
importēt { Navigēt } no "react-router-dom";
const Profils = () => {
 const {lietotājs} = useAuthContext();
 if (!lietotājs) {
 atgriezties ;
 }
 atgriezties (
 <>
Profils

 );
};

Šis komponents nosacīti renderē profila lapa atkarībā no lietotāja autentifikācijas statusa. Tas pārbauda, ​​vai lietotājs pastāv, un, ja ne, tad novirza viņu uz pieteikšanās lapu. Pretējā gadījumā tas atveido profila lapu.

Kad neizmantot React Context API

Šajā rakstā jūs uzzinājāt, kā izmantot kontekstu, lai izsekotu autentificētam lietotājam vairākos komponentos. Lai gan jums varētu rasties kārdinājums izmantot kontekstu visos datu koplietošanas gadījumos, to nevajadzētu darīt, jo tas samazina koda apkopi un veiktspēju. Katru reizi, kad konteksta vērtība mainās, katrs komponents, kas patērē stāvokli, tiek atkārtoti renderēts. Ja datus izmanto tikai daži komponenti, izvēlieties rekvizītus.

Kā lietot rekvizītus programmā ReactJS

Lasiet Tālāk

Par autoru