Come lavorare con Context API in React e React Hooks

Introduzione

In questo articolo, esaminerai come implementare l'API Context e il React Hook useContext() nel tuo progetto React. L'API Context è una struttura React che ti consente di condividere dati specifici da tutti i livelli della tua applicazione e aiuta a risolvere la perforazione dell'elica.

React Hooks sono funzioni che fungono da sostituto modulare dei metodi di stato e del ciclo di vita scritti in componenti funzionali. Il metodo useContext() è un'alternativa alla prop-drilling attraverso l'albero dei componenti e crea uno stato globale interno per passare i dati.

Le Context API (contesto)

Per esaminare le Context API, vediamo come accedere al contesto in un'applicazione React. React offre il metodo createContext() per assistere e supportare il passaggio dei dati.

Apri un file di esempio come ColorContext.js, imposta un oggetto colors e passa una proprietà come argomento al metodo createContext():

const colors = {
  blue: "#03619c",
  yellow: "#8c8f03",
  red: "#9c0312"
};

export const ColorContext = React.createContext(colors.blue);

Ciò consentirà al metodo .createContext() di sottoscrivere la proprietà colors.blue come sostegno da un componente a un altro.

Successivamente, puoi applicare il componente .Provider al tuo contesto in un altro file. Il componente .Provider abilita i dati nel tuo contesto attraverso l'intera applicazione. Nel tuo file index.js, importa la tua funzione ColorContext e aggiungi al componente .Provider nella tua dichiarazione di ritorno:

import React from 'react';
import { ColorContext } from "./ColorContext";

function App() {
  return (
    <ColorContext.Provider value={colors}>
      <Home />
    </ColorContext.Provider>
  );
}

Questo riguarda il contesto della tua funzione ColorContext per colorare la tua applicazione. Mentre la tua funzione ColorContext esiste nell'albero dei componenti, il componente .Provider faciliterà la sua funzionalità per tutto il tempo. Qui, il componente Home assorbirà i dati all'interno della tua funzione ColorContext. Anche i componenti figlio di Home otterranno i dati da ColorContext.

Puoi anche applicare il componente .Consumer per sottoscrivere le modifiche di un contesto. Questo è disponibile sia nella classe che nei componenti funzionali. Il componente .Consumer è accessibile solo all'interno di un'istruzione return. Nel tuo file index.js, imposta un componente .Consumer sulla tua funzione ColorContext nell'istruzione return:

return (
  <ColorContext.Consumer>
    {colors => <div style={colors.blue}>Hello World</div>}
  </ColorContext.Consumer>
);

Ogni volta che il contesto cambia, il componente .Consumer aggiornerà e adatterà la tua applicazione in base alla modifica.

Puoi dare al tuo componente un tipo di contesto: MyComponent.contextType = ColorContext; quindi, puoi accedere al contesto nel tuo componente: let context = this.context; e questo ti permette di accedere al tuo contesto al di fuori di JSX. O invece, potresti inserire static contextType = ColorContext;. Funziona abbastanza bene per i componenti basati su classi poiché semplifica il modo in cui portare il contesto nel componente. Ma non funzionerà in un componente funzionale.

Puoi anche dichiarare un contesto con la proprietà .contextType su un componente di classe e assegnare il suo valore alla funzione ColorContext. Puoi anche assegnare la tua funzione ColorContext all'API Context static contextType. Questi metodi si applicano solo all'interno dei componenti della classe. Rivediamo come richiamare il contesto all'interno di un componente funzionale.

Gestione del metodo useContext()

Il metodo useContext() accetta un contesto all'interno di un componente funzionale e funziona con un componente .Provider e in una chiamata .Consumer. Nel tuo file index.js, importa il metodo useContext() e la funzione ColorContext e dichiara un componente funzionale:

import React, { useContext } from "react";
import ColorContext from './ColorContext';

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
};

Il componente funzionale imposta MyComponent il valore all'interno del tuo ColorContext come argomento del metodo useContext(). La tua dichiarazione di reso applica il colore di sfondo nella tua domanda. Quando viene attivata una modifica, il metodo useContext() sottoscriverà l'aggiornamento con l'ultimo valore di contesto. Rispetto all'API Context, il metodo useContext() consente di condividere e passare i dati in tutta l'applicazione in meno righe di codice.

Conclusione

L'API Context in React ti fornisce funzioni e componenti incorporati per evitare la perforazione di oggetti nell'albero dei componenti. Il React Hook useContext() applica la stessa funzionalità in un corpo di componenti semplice e funzionale in una chiamata.