L'API React Context è uno strumento di gestione dello stato utilizzato per condividere i dati tra i componenti di React. Scopri come utilizzare l'API Context per tenere traccia degli utenti autenticati nei componenti funzionali.

Che cos'è l'API React Context?

React è una libreria basata su componenti. Le sue applicazioni comprendono componenti differenti che lavorano insieme. In alcuni casi, l'applicazione deve condividere i dati tra questi componenti.

Ad esempio, potresti voler condividere il nome utente dell'utente corrente da Login componente ad altri componenti nell'applicazione. Contesto semplifica la condivisione del nome utente eliminando la necessità di passare i dati attraverso ciascun componente nell'albero dei componenti.

Quando dovresti usare l'API React Context?

Prima di utilizzare il contesto React, considera innanzitutto il tipo di dati con cui stai lavorando. Il contesto è più adatto per dati statici. I dati che cambiano continuamente causeranno troppi re-render e, di conseguenza, ridurranno le prestazioni. I dati dovrebbero anche essere globali o almeno utilizzati da molti componenti, ad esempio dati come la lingua dell'utente, i temi e l'autenticazione.

Utilizzo del contesto per tenere traccia dello stato di autenticazione dell'utente

Se l'applicazione utilizza l'autenticazione, molti dei suoi componenti dovranno conoscere lo stato di autenticazione dell'utente corrente. La trasmissione dello stato di autenticazione a ciascun componente è ridondante e porta al drill di prop, quindi l'utilizzo del contesto è una buona opzione.

createContext()

Per iniziare con l'API Context, devi prima crearla usando questa sintassi.

const Contesto = React.createContext (valore predefinito);

Il valore predefinito non è necessario e viene solitamente utilizzato a scopo di test.

Fornitore

Ogni contesto ha un provider che riceve un valore consumato dai componenti di cui esegue il wrapping. Consente a questi componenti di sottoscrivere le modifiche al contesto.

useContext

useContext() è un Gancio di reazione che consente ai componenti di utilizzare il contesto. Hai solo bisogno di passare nel contesto.

const contextValue = useContext (contesto)

Creiamo ora il contesto di autenticazione per tenere traccia dello stato di autenticazione.

Inizia creando un nuovo file, AuthContext.js, e aggiungi quanto segue.

importa { createContext } da "reagire";
const AuthContext = createContext();
esporta AuthContext predefinito;

Quindi, crea AuthProvider.js e aggiungi la funzione provider.

import {useState, useEffect} da 'react';
importa { getUser } da './auth.js'
importa AuthContext da './AuthContext'
export const AuthProvider = ({ bambini }) => {
 const [utente, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
Restituzione (
{bambini}
 );
 };

Qui stai recuperando l'utente corrente da un falso getUser() funzione. In un'applicazione reale, questo sarebbe il tuo servizio di back-end.

Memorizza l'utente nello stato corrente per tenere traccia di eventuali modifiche, quindi passa l'utente al provider nel valore prop.

AuthProvider.js riceve anche i bambini con accesso al contesto.

Il passaggio successivo consiste nel creare un hook personalizzato che consentirà ai componenti racchiusi con il provider di accedere al contesto.

Crea un nuovo file useAuthContext.js e aggiungi quanto segue.

importa AuthContext da "./AuthContext";
const useAuthContext.js = () => {
 utente const = useContext (AuthContext);
 se (utente non definito) {
 throw new Error("useAuthContext può essere utilizzato solo all'interno di AuthProvider");
 }
 utente di ritorno;
};

Ora se il codice esterno al provider chiama AuthContext, l'applicazione gestirà l'errore in modo corretto.

Il passaggio finale è avvolgere i componenti usando il contesto con AuthProvider.js.

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




,
 rootElement
);

Ecco un esempio di come useresti il ​​contesto per proteggere una pagina da utenti non autenticati.

importa useAuthContext da "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profilo = () => {
 const { utente } = useAuthContext();
 se (! utente) {
 Restituzione ;
 }
 Restituzione (
 <>
Profilo

 );
};

Questo componente rende condizionatamente la pagina del profilo in base allo stato di autenticazione dell'utente. Verifica se l'utente esiste e, in caso contrario, lo reindirizza alla pagina di accesso. In caso contrario, esegue il rendering della pagina del profilo.

Quando non utilizzare l'API React Context

In questo articolo, hai imparato a usare Context per tenere traccia di un utente autenticato tra i componenti. Anche se potresti essere tentato di utilizzare Context per tutti i casi d'uso di condivisione dei dati, non dovresti in quanto riduce la manutenibilità e le prestazioni del codice. Ogni volta che il valore di contesto cambia, ogni componente che utilizza lo stato, esegue nuovamente il rendering. Se i dati vengono utilizzati solo da pochi componenti, optare per gli oggetti di scena.

Come utilizzare gli oggetti di scena in ReactJS

Leggi Avanti

Circa l'autore