A React Context API egy állapotkezelő eszköz, amelyet a React összetevői közötti adatok megosztására használnak. Ismerje meg, hogyan használhatja a Context API-t a hitelesített felhasználók nyomon követésére a funkcionális összetevőkben.

Mi az a React Context API?

A React egy komponens alapú könyvtár. Alkalmazásai közé tartozik különböző összetevők amelyek együtt működnek. Egyes esetekben az alkalmazásnak meg kell osztania az adatokat ezen összetevők között.

Például érdemes megosztani az aktuális felhasználó felhasználónevét a Belépés összetevőt az alkalmazás más összetevőihez. Kontextus megkönnyíti a felhasználónév megosztását azáltal, hogy kiküszöböli az adatok átadását az összetevőfában lévő egyes összetevőkön.

Mikor érdemes használni a React Context API-t?

A React kontextus használata előtt először fontolja meg, hogy milyen típusú adatokkal dolgozik. A kontextus alkalmasabb a statikus adatokhoz. A folyamatosan változó adatok túl sok újramegjelenítést okoznak, és ennek eredményeként csökken a teljesítmény. Az adatoknak globálisnak kell lenniük, vagy legalábbis sok összetevőnek kell használnia, például olyan adatoknak, mint a felhasználói nyelv, a témák és a hitelesítés.

Kontextus használata a felhasználói hitelesítési állapot nyomon követésére

Ha az alkalmazás hitelesítést használ, akkor sok összetevőjének ismernie kell az aktuális felhasználó hitelesítési állapotát. A hitelesítési állapot átadása az egyes összetevőknek redundáns, és támasztékfúráshoz vezet, így a kontextus használata jó lehetőség.

createContext()

A Context API használatának megkezdéséhez először létre kell hoznia ezt a szintaxist.

const Context = React.createContext (defaultValue);

Az alapértelmezett érték szükségtelen, és általában tesztelési célokra használják.

Szolgáltató

Minden kontextusnak van egy szolgáltatója, amely megkapja az általa burkolt összetevők által fogyasztott értéket. Lehetővé teszi, hogy ezek az összetevők előfizessenek a kontextus változásaira.

useContext

useContext() egy Reagálás horog amely lehetővé teszi az összetevők kontextus felhasználását. Csak a szövegkörnyezetben kell átadni.

const contextValue = useContext (Context)

Most hozzuk létre a hitelesítési környezetet a hitelesítési állapot nyomon követéséhez.

Kezdje egy új fájl létrehozásával, AuthContext.js, és adja hozzá a következőket.

import { createContext } from "react";
const AuthContext = createContext();
alapértelmezett AuthContext exportálása;

Ezután hozzon létre AuthProvider.js és adja hozzá a szolgáltató funkciót.

import { useState, useEffect } from 'react';
import { getUser } innen: './auth.js'
AuthContext importálása innen: "./AuthContext"
export const AuthProvider = ({ children }) => {
 const [felhasználó, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
Visszatérés (
{gyermekek}
 );
 };

Itt visszakeresi az aktuális felhasználót egy hamisítványból getUser() funkció. Valódi alkalmazásban ez lenne az Ön háttérszolgáltatása.

Tárolja a felhasználót az aktuális állapotában a változások nyomon követéséhez, majd adja át a felhasználót a szolgáltatónak az értékprofilban.

AuthProvider.js a kontextushoz hozzáféréssel rendelkező gyerekeket is fogadja.

A következő lépés egy egyéni hook létrehozása, amely lehetővé teszi a szolgáltatóval csomagolt összetevők számára a kontextus elérését.

Hozzon létre egy új fájlt useAuthContext.js és adja hozzá a következőket.

importálni AuthContextet a "./AuthContext"-ből;
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (user undefined) {
 throw new Error("useAuthContext csak az AuthProvideren belül használható");
 }
 visszatérő felhasználó;
};

Most, ha a szolgáltatón kívüli kód hív AuthContext, az alkalmazás kecsesen kezeli a hibát.

Az utolsó lépés az összetevők becsomagolása a kontextus használatával AuthProvider.js.

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




,
 gyökérelem
);

Íme egy példa arra, hogyan védheti meg a kontextust egy oldalt a nem hitelesített felhasználóktól.

import useAuthContext a "./useAuthContext" fájlból;
import { Navigate } from "react-router-dom";
const Profil = () => {
 const {felhasználó} = useAuthContext();
 if (!felhasználó) {
 Visszatérés ;
 }
 Visszatérés (
 <>
Profil

 );
};

Ez a komponens feltételesen rendereli a profiloldalt a felhasználó hitelesítési állapotától függően. Ellenőrzi, hogy a felhasználó létezik-e, és ha nem, átirányítja a bejelentkezési oldalra. Ellenkező esetben a profiloldalt jeleníti meg.

Mikor ne használja a React Context API-t

Ebből a cikkből megtanulta, hogyan kell a Context segítségével nyomon követni egy hitelesített felhasználót az összetevők között. Bár lehet, hogy kísértést érezhet a Context használatára az összes adatmegosztási felhasználási esetre, ezt nem szabad megtennie, mivel ez csökkenti a kód karbantarthatóságát és teljesítményét. Minden alkalommal, amikor a környezeti érték megváltozik, minden egyes állapotfelhasználó összetevő újrarenderelődik. Ha az adatokat csak néhány összetevő használja, válassza a kellékeket.

A kellékek használata a ReactJS-ben

Olvassa el a következőt

A szerzőről