React Context API je nástroj na správu stavu používaný na zdieľanie údajov medzi komponentmi React. Zistite, ako používať kontextové rozhranie API na sledovanie overených používateľov vo funkčných komponentoch.

Čo je React Context API?

React je knižnica založená na komponentoch. Jeho aplikácie zahŕňajú rôzne komponenty ktoré spolupracujú. V niektorých prípadoch musí vaša aplikácia zdieľať údaje medzi týmito komponentmi.

Môžete napríklad chcieť zdieľať používateľské meno aktuálneho používateľa z Prihlásiť sa komponent na iné komponenty vo vašej aplikácii. Kontext uľahčuje zdieľanie používateľského mena tým, že eliminuje potrebu odovzdávať údaje cez každý komponent v strome komponentov.

Kedy by ste mali použiť React Context API?

Pred použitím kontextu React najprv zvážte typ údajov, s ktorými pracujete. Kontext je vhodnejší pre statické údaje. Údaje, ktoré sa neustále menia, spôsobia príliš veľa opakovaných vykreslení a v dôsledku toho znížia výkon. Údaje by tiež mali byť globálne alebo aspoň používané mnohými komponentmi, napríklad údajmi, ako je jazyk používateľa, témy a overenie.

Používanie kontextu na sledovanie stavu overenia používateľa

Ak vaša aplikácia používa autentifikáciu, mnohé jej súčasti budú musieť poznať stav autentifikácie aktuálneho používateľa. Odovzdávanie stavu overenia každému komponentu je nadbytočné a vedie k vŕtaniu podpier, takže použitie kontextu je dobrou voľbou.

createContext()

Ak chcete začať s kontextovým rozhraním API, musíte ho najprv vytvoriť pomocou tejto syntaxe.

const Context = React.createContext (defaultValue);

Predvolená hodnota je zbytočná a zvyčajne sa používa na testovacie účely.

Poskytovateľ

Každý kontext má poskytovateľa, ktorý prijíma hodnotu spotrebovanú komponentmi, ktoré obaluje. Umožňuje týmto komponentom prihlásiť sa na zmeny kontextu.

použite kontext

useContext() je a Reagovať hák čo umožňuje komponentom konzumovať kontext. Stačí prejsť v kontexte.

const contextValue = useContext (Context)

Poďme teraz vytvoriť kontext overovania, aby sme mohli sledovať stav overenia.

Začnite vytvorením nového súboru, AuthContext.js, a pridajte nasledujúce.

import { createContext } z "reagovať";
const AuthContext = createContext();
exportovať predvolený AuthContext;

Ďalej vytvorte AuthProvider.js a pridajte funkciu poskytovateľa.

import { useState, useEffect } from 'react';
importovať { getUser } z './auth.js'
importovať AuthContext z './AuthContext'
export const AuthProvider = ({ deti }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
vrátiť (
{deti}
 );
 };

Tu získavate aktuálneho používateľa z falošného getUser() funkciu. V skutočnej aplikácii by to bola vaša backendová služba.

Uložte používateľa v aktuálnom stave, aby ste mali prehľad o akýchkoľvek zmenách, a potom odovzdajte používateľa poskytovateľovi v hodnotovom prop.

AuthProvider.js tiež prijíma deti s prístupom ku kontextu.

Ďalším krokom je vytvorenie vlastného háku, ktorý umožní komponentom zabaleným s poskytovateľom prístup ku kontextu.

Vytvorte nový súbor useAuthContext.js a pridajte nasledujúce.

importovať AuthContext z "./AuthContext";
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (user undefined) {
 throw new Error("useAuthContext je možné použiť iba v rámci AuthProvider");
 }
 návrat užívateľa;
};

Teraz, ak kód mimo poskytovateľa zavolá AuthContext, vaša aplikácia si s chybou poradí.

Posledným krokom je zabaliť komponenty pomocou kontextu s AuthProvider.js.

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




,
 rootElement
);

Tu je príklad toho, ako by ste použili kontext na ochranu stránky pred neoverenými používateľmi.

import useAuthContext z "./useAuthContext";
import { Navigovať } z "react-router-dom";
const Profil = () => {
 const { user } = useAuthContext();
 if (!user) {
 vrátiť ;
 }
 vrátiť (
 <>
Profil

 );
};

Tento komponent podmienečne vykresľuje stránku profilu v závislosti od stavu overenia používateľa. Skontroluje, či používateľ existuje, a ak nie, presmeruje ho na prihlasovaciu stránku. V opačnom prípade vykreslí stránku profilu.

Kedy nepoužívať kontextové rozhranie React API

V tomto článku ste sa naučili, ako používať kontext na sledovanie overeného používateľa naprieč komponentmi. Hoci by ste mohli byť v pokušení použiť Kontext pre všetky prípady použitia zdieľania údajov, nemali by ste to robiť, pretože to znižuje udržiavateľnosť a výkon kódu. Zakaždým, keď sa kontextová hodnota zmení, každý komponent, ktorý využíva opätovné vykreslenie stavu. Ak údaje používa iba niekoľko komponentov, rozhodnite sa pre rekvizity.

Ako používať rekvizity v ReactJS

Prečítajte si ďalej

O autorovi