Comprensione dell'API di contesto

In un progetto React.js, creiamo componenti e poi trasmettiamo gli oggetti di scena a quei componenti. Possiamo passare questi oggetti di scena a livelli infiniti di componenti nidificati. Ma se ci sono molti componenti e tutti hanno bisogno di diversi oggetti di scena condivisi, il progetto diventa ingestibile. È qui che entra in gioco l'API Context. Ci consente di utilizzare oggetti di scena a livelli nidificati profondi senza eseguire perforazioni di oggetti di scena.

Il modo in cui lo usiamo è creare prima un contesto e per questo utilizziamo l'hook createContext di react. Possiamo anche passargli un valore predefinito, se lo desideriamo. Quindi creiamo un componente provider per quel contesto. L'oggetto contesto ha un componente provider in cui passiamo il valore del contesto come prop. Qui ho passato sia il valore di contesto che una funzione che consentirà ai componenti del consumatore di modificare il valore.

Qualsiasi componente annidato all'interno del provider avrà accesso al valore di quel particolare contesto. Possiamo anche annidare un componente all'interno di più provider e consumerà i valori di tutti loro.

Qui, i componenti Player e Match consumeranno i valori di FootballProvider e anche di OtherProvider.

Per utilizzare il valore del provider è necessario utilizzare l'hook useContext.

Ciò consente l'uso di valori condivisi tra componenti profondamente nidificati senza componenti intermedi che contengano valori come i bridge. Uno svantaggio dell'utilizzo dell'API Context è che ogni volta che il valore del contesto cambia, tutti i componenti sottostanti verranno nuovamente visualizzati. Ma non sarebbe del tutto corretto definirlo un aspetto negativo poiché questo comportamento è anche vantaggioso in alcuni scenari.