ReactJS - Contesto: Una Guida per Principianti

Ciao a tutti, aspiranti sviluppatori! Oggi esploriamo il meraviglioso mondo del Contesto di ReactJS. Come il vostro insegnante di computer di quartiere, sono qui per guidarvi attraverso questo concetto con la stessa entusiasmo che avevo quando l'ho imparato per la prima volta. Quindi, prendete la vostra bevanda preferita, fatevi comodi e partiamo insieme per questo emozionante viaggio!

Cos'è il Contesto in React?

Immaginate di essere a una riunione di famiglia e volete condividere una storia divertente con tutti. Invece di sussurrarla a ogni persona singolarmente, non sarebbe fantastico se poteste annunciarla una volta sola e tutti potessero sentirla? Ecco esattamente cosa fa il Contesto in React!

Il Contesto fornisce un modo per passare dati attraverso l'albero dei componenti senza dover passare props manualmente a ogni livello. È progettato per condividere dati che possono essere considerati "globali" per un albero di componenti React.

Quando Usare il Contesto

Prima di addentrarci di più, capiremo quando usare il Contesto:

1. Quando avete dati che devono essere accessibili da molti componenti a diversi livelli di annidamento.
2. Quando volete evitare il "prop drilling" (passare props attraverso componenti intermedi che non necessitano dei dati).

Creare e Usare il Contesto

Esploriamo il processo di creazione e utilizzo del Contesto con alcuni esempi di codice.

Passo 1: Creare un Contesto

Prima, dobbiamo creare un Contesto. Useremo il metodo React.createContext() per questo.

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

In questo esempio, abbiamo creato un ThemeContext con un valore predefinito di 'light'. Questo valore predefinito viene utilizzato quando un componente non ha un Provider corrispondente sopra di esso nell'albero.

Passo 2: Fornire il Contesto

Ora che abbiamo il nostro Contesto, dobbiamo fornirlo al nostro albero di componenti. Lo facciamo usando il componente Context.Provider.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

In questo esempio, stiamo avvolgendo il nostro componente Toolbar (e, per estensione, tutti i suoi figli) con ThemeContext.Provider. Stiamo impostando il valore su "dark", che sarà disponibile per tutti i componenti all'interno di questo Provider.

Passo 3: Consumare il Contesto

Ora arriva la parte divertente - utilizzare il nostro Contesto! Ci sono due modi per consumare il Contesto:

1. Class.contextType
2. Context.Consumer

Esaminiamo entrambi:

Utilizzando Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>I'm a themed button!</button>;
}
}

In questo esempio, ThemedButton è un componente di classe. Abbiamo impostato il suo contextType sul nostro ThemeContext. Ora, this.context ci darà accesso al valore corrente del contesto.

Utilizzando Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>I'm a themed button!</button>}
</ThemeContext.Consumer>
);
}

Qui, stiamo utilizzando il componente Context.Consumer. Esso utilizza una proprietà di rendering per passare il valore corrente del contesto a una funzione.

Contesti Multipli

A volte, potreste aver bisogno di utilizzare più contesti. React vi permette di annidare più Providers:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

E potete consumare più contesti così:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} is using {theme} theme
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Aggiornare il Contesto

Il Contesto può anche essere dinamico. Guardiamo un esempio dove aggiorniamo il nostro tema:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</ThemeContext.Provider>
);
}

In questo esempio, stiamo utilizzando l'hook useState per gestire il nostro stato del tema. Stiamo passando sia il tema corrente che la funzione setTheme nel valore del contesto.

Metodi del Contesto

Ecco una tabella che riassume i principali metodi del Contesto che abbiamo coperto:

Metodo	Descrizione
React.createContext()	Crea un oggetto Contesto
Context.Provider	Fornisce un valore di contesto ai componenti
Class.contextType	Permette ai componenti di classe di consumare un singolo contesto
Context.Consumer	Permette ai componenti di funzione di sottoscrivere un contesto

Conclusione

Eccoci, gente! Abbiamo viaggiato attraverso il territorio del Contesto di React, dalla sua creazione alla sua consumazione e persino il suo aggiornamento. Il Contesto è uno strumento potente in React, che vi permette di evitare il prop drilling e gestire lo stato globale in modo efficace.

Ricordate, come ogni strumento, il Contesto non è sempre la soluzione giusta. Per casi più semplici, i props potrebbero ancora essere la vostra miglior scommessa. Ma quando avete bisogno di condividere dati tra molti componenti a diversi livelli, il Contesto può diventare il vostro nuovo migliore amico.

Continuate a praticare, continuate a programmare e, soprattutto, continuate a divertirvi! Fino alla prossima volta, happy Reacting!

Credits: Image by storyset