Cos'è il contesto in React?

Mar 09 2023

Oggetti di scena vs contesto Ciao mondo! Durante lo sviluppo di un'applicazione, potrebbe essere necessario trasferire dati da un componente all'altro. A volte lo scenario sarebbe un po' complesso in cui dobbiamo passare i dati dall'ennesimo figlio del componente X all'ennesimo figlio del componente Y.

Oggetti di scena contro contesto

Ciao mondo!

Durante lo sviluppo di un'applicazione, potrebbe essere necessario trasferire dati da un componente all'altro. A volte lo scenario sarebbe un po' complesso in cui dobbiamo passare i dati dall'ennesimo figlio del componente X all'ennesimo figlio del componente Y.

Usare "Props" è uno dei modi per farlo. Tuttavia, è un componente nidificato, quindi dovremo concatenare più oggetti di scena fino a raggiungere il componente desiderato.

Vediamo un esempio:

Nel diagramma sopra, consideriamo se vogliamo passare il valore della valvariabile dal component Xal component c, che è il 3° figlio del component Y. Se stiamo passando attraverso gli oggetti di scena, allora sarebbe come: passeremo il val da Xa Y, poi Ya a, poi aa be infine da ba c. Questo è un concatenamento così lungo di oggetti di scena da Xa c. Ma cosa succede se abbiamo 100 elementi secondari al componente Y e dobbiamo passare il valore al centesimo componente da Y. Non possiamo scrivere 100 oggetti di scena in una catena. Per questo scenario, possiamo usare l' ContextAPI react.

Context è un'API integrata in react, introdotta nella v16.3. Il contesto ci consente di passare direttamente il valore da un componente all'altro, senza passare attraverso l'albero dei componenti. Il contesto memorizza i valori separatamente, quindi i dati sono universalmente disponibili in tutta l'applicazione.

Questo è il modo in cui il contesto funzionerebbe logicamente:

Come implementarlo?

È molto semplice creare un contesto. Possiamo creare un contesto come questo:

import { createContext } from "react";
export const NameOfContext = createContext('initial value')

import {NameOfContext} from './path/to/context'
export default function App() {
    return (
        // Here the "val" is the context value and "setVal" is the function used to change the context value
        <ThemeContext.Provider value={{val, setVal}}>
            <div className="main-container">
                .
                .
                .
                .
            </div>
        </ThemeContext.Provider>

import {NameOfContext} from './path/to/context'

const Component = () => {
    // destructing the value and function with useContext hook
    const {val, setVal} = useContext(NameOfContext)
    return (
        <div>
            <!-- Assuming the val is 0 and on clicking the button, we are incrementing by 1 -->
            <button onClick={() => setVal(val+1)}>{val}</button>
        </div>
    )
}

export default Component

Ho utilizzato il contesto in uno dei casi d'uso sul mio sito web. Stavo implementando un tema scuro per il mio sito Web, in cui il tema dovrebbe alternare tra scuro e chiaro facendo clic su un pulsante.

Per implementare questo, ho creato un ThemeContext, che memorizza il valore del tema se è 'dark'o 'light'. Imposterò il valore del contesto nel componente che contiene il pulsante di attivazione/disattivazione. Per il resto dei componenti, otterrò il valore del contesto e applicherò le classi CSS in base al valore del contesto.

Di seguito sono riportate alcune implementazioni sul mio sito Web:

Ho creato ThemeContext.jsil file, dove ho creato e inizializzato il contesto con 'light'.

Nel App.jsfile, ho racchiuso le cose all'interno <ThemeContext.Provider>di tag.

In header.jsx, il file che contiene il pulsante di attivazione/disattivazione, sto utilizzando per themeimpostare gli stili per i temi e setThemeper aggiornare il contesto quando si fa clic sul pulsante.

Cos'è il contesto in React?

Oggetti di scena contro contesto

Come implementarlo?

Pro e contro

Professionisti