Context Hooks

Questo argomento (di ReactJS) è utile per i programmatori che devono usare State hook in modo globale, ovvero che devono passare proprietà props in cascata a molti componenti. In alcuni casi è utile in React Navigation.

Context possono essere usati sia nei component basati su classi, che nei component basati su funzioni.

Per ora si vedrà il primo tipo.

A volte bisogna usare props su molti Component in cascata ed è noioso passarli più volte. context viene usato per inoltrare automaticamente i valori di alcune proprietà attraverso più di un elemento nell’albero gerarchico dei Component (automaticamente, ogni volta che questi valori cambiano). Un po’ come quando in Java c’è un Emettitore e molti Ascoltatori.
Questi valori sono modificabili, quindi prima di proseguire, bisogna conoscere state e useState() vedi articolo¹

Il vantaggio dei context è quello di evitare di passare props ripetutamente in cascata.
Ad esempio,

1. il Context si potrebbe usare per comunicare a tutti i component un nuovo tema per la schermata.
2. il Context potrebbe essere usato per contenere le informazioni di un utente.
3. durante il routing nelle varie schermate, alcuni component possono apparire e scomparire a seconda di queste informazioni.
4. Usando un Redux insieme ai Context si possono gestire meglio i dati da passare.

Ci sono anche svantaggi ad usare Context…

Esistono due tipi di componenti di tipo context:

• componenti provider
• componenti consumer

I provider inviano i dati (value) mentre i consumer li ricevono (senza richiedere la cascata di prop).

Ad esempio, in questa immagine si può osservare che la variabile value viene inoltrata dall’alto verso il basso (senza passare props) tramite context al ThemedButton (che lo riceve in color).

Le azioni da fare per utilizzare questo sistema, sono tre:

• definire separatamente i dati fanno parte del context
  • i dati avranno un valore di default (inizializzando la variabile state)
• creare (nel file appena separato) un component genitore che sia Provider con il metodo createContext(defaultValore)
• registrare tutti i component Consumer che devono ricevere i dati (value)
  • se è un component basato su classi si usa valore=this.context, insieme a: Consumatore.contexType=Fornitore
  • se è un component basato su funzioni, invece, si usa valore=useContext(Provider)

Questo è lo schema completo dell’esempio che si vuole proporre² (in origine era un esempio di ReactJS che qui è stato modificato per essere usato anche su React Native)

Si vorrebbe allegare anche un codice sorgente (con commenti), ma non sarebbe legale per la licenza d’uso della documentazione non libera di React (diversamente da quella presente su Github).

Anche se non si allega il codice sorgente, si può dire che:

• usando componenti basati su classi, il programmatore può definire autonomamente state e setState (come in questo esempio³ )
• usando componenti basati su funzioni, il programmatore utilizza un hook

import React, {useState} from 'react';

1. https://www.cancellino.org/2023/01/state-hooks/ [↩]
2. esempio tratto da https://reactjs.org/docs/context.html [↩]
3. https://reactjs.org/docs/context.html [↩]