Perché React? - 3. Flusso Dati Unidirezionale
Tags: react
Published: 2020-08-30 16:46:45

---
title: Perché React? - 3. Flusso Dati Unidirezionale
published: true
date: 2020-08-30 08:00:00 UTC
tags: React
canonical_url: https://www.matteospreafico.com/perche-react-3-flusso-dati-unidirezionale/
series: Corso di React
description: React adotta un modo esplicito per passare i dati tra i componenti che rende molto facile gestire i cambiamenti di stato ed individuare gli impatti sul resto dell'applicazione. Questo è chiamato Flusso Dati Unidirezionale perché i dati scorrono in una direzione, dall'elemento padre ai figli.
---

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](https://angular.io/) e [Ember](https://emberjs.com/) 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.

![](https://res-4.cloudinary.com/hdlxbiakh/image/upload/q_auto/v1/ghost-blog-images/Flusso-Dati-Unidirezionale.svg)<figcaption>Flusso Dati Unidirezionale dall'elemento padre all'elemento figlio. Gli aggiornamenti sono mandati all'elemento padre che si occupa di eseguirli.</figcaption>

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>
```
<figcaption>Esempio di componente padre con più componenti figli</figcaption>

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.