Perché React? - 3. Flusso Dati Unidirezionale

Prima di React, una tecnica molto popolare per gestire i cambiamenti di stato nel tempo nelle applicazioni era l'uso dei data-bindings in modo quando i dati fossero cambiati, quelle modifiche sarebbero state applicate automaticamente nelle altre parti dell'applicazione ed ogni parte dell'applicazione che avesse avuto quei dati, li avrebbe anche potuti cambiare. Tuttavia col crescere dell'applicazione questa tecnica rende difficile individuare come un cambiamento in un posto, automaticamente ed implicitamente impatta il resto dell'applicazione.

Data-Binding in altri Frameworks

Altri front-end frameworks come Angular e Ember fanno uso di data-bindings bidirezionale. Col il data-bindings bidirezionale, i dati sono tenuti in sincrono in tutta l'applicazione a prescindere da dove sono aggiornati. Se il modello cambia i suoi valori, i dati sia aggiornano nella presentazione. Allo stesso modo, se i dati sono aggiornati nella presentazione, il modello viene aggiornato. Il data-binding è molto potente, ma rende più difficile capire dove e perché i dati sono aggiornati.

Flusso Dati in React

I dati si spostano in modo diverso in React grazie al suo Flusso Dati Unidirezionale. In React i dati si muovono componente padre al componente figlio.

Flusso Dati Unidirezionale dall'elemento padre all'elemento figlio. Gli aggiornamenti sono mandati all'elemento padre che si occupa di eseguirli.

Nell'immagine precedente, ci sono due componenti:

• un componente padre
• un componente figlio

I dati vivono nel componente padre e sono passati al componente figlio. Anche se i dati vivono nel componente padre, sia il componente padre che il figlio possono usare i dati. Se però i dati devono essere aggiornati, solo il componente padre dovrebbe eseguire l'aggiornamento. Se il componente figlio vuole fare dei cambiamenti, dovrà mandare l'aggiornamento al componente padre che si occuperà di eseguire effettivamente l'aggiornamento dei dati. Una volta che il cambiamento è eseguito, il componente figlio riceverà i dati (che sono appena stati aggiornati).

Questa sembra un inutile lavoro in più, ma avere i dati che scorrono in una direzione ed avere un solo posto dove i dati sono modificati, rende molto più semplice capire come l'applicazione funziona.

<TabellaProdotti>
  <RigaCategoriaProdotto />
  <RigaProdotto />
</TabellaProdotti>

Esempio di componente padre con più componenti figli

In React, i dati passano solo in una direzione, dal padre al figlio. Se i dati sono condivisi tra più componenti figli, allora i dati devono essere saltati nel componente padre e passati a tutti i componenti figli che ne hanno bisogno.