React Context API je nástroj pro správu stavu používaný pro sdílení dat napříč komponentami React. Zjistěte, jak používat kontextové rozhraní API ke sledování ověřených uživatelů ve funkčních komponentách.

Co je React Context API?

React je knihovna založená na komponentách. Jeho aplikace zahrnují různé komponenty které spolupracují. V některých případech vaše aplikace potřebuje sdílet data mezi těmito součástmi.

Můžete například chtít sdílet uživatelské jméno aktuálního uživatele z Přihlásit se komponentu na jiné komponenty ve vaší aplikaci. Kontext usnadňuje sdílení uživatelského jména tím, že eliminuje potřebu předávat data každou komponentou ve stromu komponent.

Kdy byste měli použít React Context API?

Před použitím kontextu React nejprve zvažte typ dat, se kterými pracujete. Kontext je vhodnější pro statická data. Data, která se neustále mění, způsobí příliš mnoho opakovaných vykreslení a v důsledku toho sníží výkon. Data by také měla být globální nebo alespoň používaná mnoha komponentami, například daty, jako je jazyk uživatele, témata a ověřování.

Použití kontextu ke sledování stavu ověření uživatele

Pokud vaše aplikace používá autentizaci, mnoho jejích součástí bude muset znát stav autentizace aktuálního uživatele. Předávání stavu autentizace každé komponentě je nadbytečné a vede k vrtání podpěr, takže použití kontextu je dobrou volbou.

createContext()

Chcete-li začít s kontextovým rozhraním API, musíte jej nejprve vytvořit pomocí této syntaxe.

const Context = React.createContext (defaultValue);

Výchozí hodnota je zbytečná a obvykle se používá pro účely testování.

Poskytovatel

Každý kontext má poskytovatele, který přijímá hodnotu spotřebovanou komponentami, které obaluje. Umožňuje těmto komponentám přihlásit se k odběru změn kontextu.

použití kontextu

useContext() je Reagovat háček což umožňuje komponentám konzumovat kontext. Musíte pouze projít v kontextu.

const contextValue = useContext (Context)

Pojďme nyní vytvořit kontext ověřování, abychom mohli sledovat stav ověřování.

Začněte vytvořením nového souboru, AuthContext.js, a přidejte následující.

import { createContext } z "react";
const AuthContext = createContext();
exportovat výchozí AuthContext;

Dále vytvořte AuthProvider.js a přidejte funkci poskytovatele.

import { useState, useEffect } z 'react';
import { getUser } z './auth.js'
importovat AuthContext z './AuthContext'
export const AuthProvider = ({ děti }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
vrátit se (
{děti}
 );
 };

Zde získáváte aktuálního uživatele z falešného getUser() funkce. Ve skutečné aplikaci by to byla vaše backendová služba.

Uložte uživatele v aktuálním stavu, abyste měli přehled o všech změnách, poté předejte uživatele poskytovateli v hodnotovém prop.

AuthProvider.js také přijímá děti s přístupem ke kontextu.

Dalším krokem je vytvoření vlastního háku, který umožní komponentám zabaleným s poskytovatelem přístup ke kontextu.

Vytvořte nový soubor useAuthContext.js a přidejte následující.

import AuthContext z "./AuthContext";
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (user undefined) {
 throw new Error("useAuthContext lze použít pouze uvnitř AuthProvider");
 }
 návratový uživatel;
};

Nyní, pokud kód mimo poskytovatele volá AuthContext, vaše aplikace si s chybou poradí.

Posledním krokem je zabalit komponenty pomocí kontextu AuthProvider.js.

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




,
 rootElement
);

Zde je příklad toho, jak byste použili kontext k ochraně stránky před neověřenými uživateli.

import useAuthContext z "./useAuthContext";
import { Navigovat } z "react-router-dom";
const Profil = () => {
 const { uživatel } ​​= useAuthContext();
 if (!user) {
 vrátit se ;
 }
 vrátit se (
 <>
Profil

 );
};

Tato součást podmíněně vykresluje stránku profilu v závislosti na stavu ověření uživatele. Zkontroluje, zda uživatel existuje, a pokud ne, přesměruje jej na přihlašovací stránku. V opačném případě vykreslí stránku profilu.

Kdy nepoužívat React Context API

V tomto článku jste se naučili, jak používat kontext ke sledování ověřeného uživatele napříč komponentami. I když byste mohli být v pokušení používat kontext pro všechny případy použití sdílení dat, neměli byste to dělat, protože to snižuje udržovatelnost a výkon kódu. Pokaždé, když se kontextová hodnota změní, každá komponenta, která spotřebovává opětovné vykreslení stavu. Pokud data používá pouze několik komponent, zvolte rekvizity.

Jak používat rekvizity v ReactJS

Přečtěte si další

O autorovi