페르쉐 리액트? - 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.

altri 프레임워크의 데이터 바인딩

Altri 프런트 엔드 프레임워크는 Angular 및 Ember 데이터 바인딩 방식을 사용합니다. 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

I dati si spostano in modo diverso in React grazie al suo Flusso Dati Unidirezionale. 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 선례, 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 fee 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 piu, 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 piu componenti figli



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.