API-ul React Context este un instrument de gestionare a stării utilizat pentru partajarea datelor între componentele React. Aflați cum să utilizați Context API pentru a urmări utilizatorii autentificați în componentele funcționale.

Ce este API-ul React Context?

React este o bibliotecă bazată pe componente. Aplicațiile sale cuprind diferite componente care lucrează împreună. În unele cazuri, aplicația dvs. trebuie să partajeze date între aceste componente.

De exemplu, este posibil să doriți să partajați numele de utilizator al utilizatorului actual din Autentificare componentă la alte componente din aplicația dvs. Context facilitează partajarea numelui de utilizator prin eliminarea necesității de a trece date prin fiecare componentă din arborele componente.

Când ar trebui să utilizați API-ul React Context?

Înainte de a utiliza contextul React, luați în considerare mai întâi tipul de date cu care lucrați. Contextul este mai potrivit pentru datele statice. Datele care se modifică continuu vor cauza prea multe re-rendări și, ca urmare, vor reduce performanța. De asemenea, datele ar trebui să fie globale sau cel puțin utilizate de multe componente, de exemplu, date precum limba utilizatorului, temele și autentificarea.

Utilizarea contextului pentru a urmări starea de autentificare a utilizatorului

Dacă aplicația dvs. utilizează autentificarea, multe dintre componentele sale vor trebui să cunoască starea de autentificare a utilizatorului curent. Transmiterea stării de autentificare către fiecare componentă este redundantă și duce la găurirea suportului, așa că utilizarea contextului este o opțiune bună.

createContext()

Pentru a începe cu API-ul Context, mai întâi trebuie să îl creați folosind această sintaxă.

const Context = React.createContext (defaultValue);

Valoarea implicită este inutilă și este de obicei folosită în scopuri de testare.

Furnizor

Fiecare context are un furnizor care primește o valoare consumată de componentele pe care le împachetează. Permite acestor componente să se aboneze la schimbările de context.

foloseșteContext

useContext() este o Cârlig de reacție care permite componentelor să consume context. Trebuie doar să treci în context.

const contextValue = useContext (Context)

Să creăm acum contextul de autentificare pentru a urmări starea de autentificare.

Începeți prin a crea un fișier nou, AuthContext.js, și adăugați următoarele.

import { createContext } din „react”;
const AuthContext = createContext();
export implicit AuthContext;

Apoi, creează AuthProvider.js și adăugați funcția de furnizor.

import { useState, useEffect } din 'react';
import { getUser } din „./auth.js”
importați AuthContext din „./AuthContext”
export const AuthProvider = ({ copii }) => {
 const [utilizator, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (utilizator curent)
 }, []);
întoarcere (
{copii}
 );
 };

Aici, preluați utilizatorul actual dintr-un fals getUser() funcţie. Într-o aplicație reală, acesta ar fi serviciul tău backend.

Stocați utilizatorul în starea curentă pentru a ține evidența oricăror modificări, apoi transmiteți utilizatorul furnizorului în valoarea prop.

AuthProvider.js primeşte şi copiii cu acces la context.

Următorul pas este crearea unui cârlig personalizat care va permite componentelor împachetate cu furnizorul să acceseze contextul.

Creați un fișier nou foloseșteAuthContext.js și adăugați următoarele.

importați AuthContext din „./AuthContext”;
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (utilizator nedefinit) {
 throw new Error(„useAuthContext poate fi folosit numai în AuthProvider”);
 }
 utilizator returnat;
};

Acum, dacă codul din afara furnizorului sună AuthContext, aplicația dvs. va gestiona eroarea cu grație.

Pasul final este să împachetați componentele folosind contextul cu AuthProvider.js.

import { AuthProvider } din „./AuthContext”;
ReactDOM.render(




,
 rootElement
);

Iată un exemplu despre cum ați folosi contextul pentru a proteja o pagină de utilizatorii neautentificați.

import useAuthContext din „./useAuthContext”;
import { Navigate } din "react-router-dom";
const Profil = () => {
 const { utilizator } = useAuthContext();
 dacă (!utilizator) {
 întoarcere ;
 }
 întoarcere (
 <>
Profil

 );
};

Această componentă redă condiționat pagina de profil în funcție de starea de autentificare a utilizatorului. Verifică dacă utilizatorul există și dacă nu există, îl redirecționează către pagina de conectare. În caz contrar, redă pagina de profil.

Când nu trebuie să utilizați API-ul React Context

În acest articol, ați învățat cum să utilizați Context pentru a urmări un utilizator autentificat pe componente. Deși ați putea fi tentat să utilizați Context pentru toate cazurile de utilizare a partajării datelor, nu ar trebui, deoarece reduce mentenabilitatea și performanța codului. De fiecare dată când valoarea contextului se modifică, fiecare componentă care consumă redări de stare. Dacă datele sunt folosite doar de câteva componente, optați pentru recuzită.

Cum să utilizați elementele de recuzită în ReactJS

Citiți în continuare

Despre autor