Perché React? - 2. Codice Dichiarativo

Proviamo a spiegare chiaramente la differenza che probabilmente avete già sperimentato. Pensiamo di essere in auto e voler viaggiare ad una velocità costante di 50km/h. In auto ci son due pedali, un acceleratore ed un freno. Io devo fare un lavoro imperativo, devo premere sui pedali per regolare la velocità e mantenerla costante a 50km/h. Ora supponiamo di avere un'auto nuova, che ha il controllo di velocità che mi permette semplicemente di dichiarare a che velocità voglio viaggiare al posto di dovere usare i pedali per regolare la velocità. Devo semplicemente selezionare lo stato in cui voglio essere, viaggiare a 50 km/h e la macchina si occupa del lavoro imperativo per me.

React ti permette di fare la stessa cosa col tuo codice. Tu dichiari lo stato ed il markup e React esegue il lavoro imperativo per mantenere il DOM aggiornato con la tua applicazione.

Codice Imperativo

Una gran parte di JavaScript è codice imperativo. Se non sai cosa significa "imperativo", potresti avere qualche problema, quindi proviamo a capirlo. Secondo il dizionario "imperativo" significa:

Che contiene o esprime comando.

Quando il codice JavaScript è scritto in modo imperativo, noi diciamo in JavaScript esattamente cosa fare e come farlo. Prova a pensare come se dassimo a JavaScript dei comandi su come eseguire esattamente ogni passaggio. Ad esempio in questo semplice ciclo for:

const colori = ['Verde', 'Bianco', 'Rosso', 'Giallo', 'Azzurro', 'Viola']
const coloriChiari = []

for (let i = 0; i < colori.length; i++) {
 coloriChiari[i] = colori[i] + ' chiaro'
}

Codice Imperativo

Se avete già provato a scrivere JavaScript, questo codice dovrebbe essere abbastanza chiaro. Stiamo ciclando su ogni elemento dell'array colori, aggiungendo ' chiaro' alla fine e salvando la nuova stringa risultante in una nuovo array coloriChiari. Abbastanza semplice, giusto?

Questo è codice imperativo! Stiamo dicendo a JavaScript cosa fare in ogni singolo passaggio. Questi sono i comandi che stiamo dando:

• Imposta il valore iniziale per l'iteratore - (let i = 0)
• Diciamo al ciclo for quando deve fermarsi - (i < colori.length)
• Prendiamo il colore alla posizione corrente e ci aggiungiamo ' chiaro' - (colori[i] + ' chiaro')
• Salviamo il risultato nella posizione i-esima del nuovo array - (coloriChiari[i])
• Aumentiamo di uno il valore di i - (i++)

Tornando all'esempio iniziale di viaggiare a 50km/h con la mia vecchia automobile, usavo il pedale dell'acceleratore e del freno per regolare la velocità. Quando la velocità era troppo alta, dovevo premere sul pedale del freno per rallentare, ma se rallentava troppo, dovevo di nuovo premere il pedale dell'acceleratore per aumentare la velocità. Inevitabilmente la velocità aumentava troppo e dovevo di nuovo premere il pedale del freno per rallentare. Dovevo gestire la velocità per gestire ogni variazione. Non vi sembra una situazione imperativa? Vediamo se possiamo migliorare le cose!

Codice Dichiarativo

In contrasto al codice imperativo, esiste il codice dichiarativo. Col codice dichiarativo, non dobbiamo specificare ogni singolo passaggio per ottenere il risultato finale. Invece, dichiariamo quello che vogliamo fare, e JavaScript si occuperà di farlo. Mi rendo conto che la spiegazione è un po' astratta, quindi vediamo un esempio. Prendiamo il ciclo for imperativo che abbiamo appena visto e riscriviamolo per renderlo più dichiarativo.

Con il codice imperativo eseguiamo tutti i passaggi per ottenere il risultato finale, ma qual è il risultato finale che veramente vogliamo? Il punto d'inizio era solo un array di colori:

const colori = ['Verde', 'Bianco', 'Rosso', 'Giallo', 'Azzurro', 'Viola']

Array iniziale di colori

L'obiettivo finale che vogliamo ottenere è un array con gli stessi colori, ma con la scritta ' chiaro' alla fine:

['Verde chiaro', 'Bianco chiaro', 'Rosso chiaro', 'Giallo chiaro', 'Azzurro chiaro', 'Viola chiaro']

Obiettivo finale di colori

Per ottenere questo risultato, possiamo prendere l'array iniziale ed usare la funzione JavaScript .map() per dichiarare quello che vogliamo.

const coloriChiari = colori.map(name => name + ' chiaro')

Esempio di codice dichiarativo

Fatto! Con questo codice, non dobbiamo:

• Creare un iteratore
• Dire al ciclo quando deve fermarsi
• Usare un iteratore per selezionare un elemento dell'array colori
• Salvare ogni nuovo valore nell'array coloriChiari

Tutte queste operazioni sono eseguite dal metodo .map() degli Array JavaScript.

React è Dichiarativo

Scriveremo codice React presto, ma vediamo meglio cosa significa che è dichiarativo.

<button onClick={attivareVentilatore}>Attivare Ventilatore</button>

Esempio di codice React Dichiarativo

Sembrerà strano, ma questo è un frammento valido di codice React e dovrebbe essere semplice da capire. C'è solo un attributo onClick sul bottone e non stiamo usando .addEventListener() per gestire l'evento con tutti i passaggi necessari. Invece, stiamo solo dichiarando che vogliamo che la funzione attivareVentilatore sia eseguita quando si clicca sul buttone.

Riepilogo

Il codice imperativo dice a JavaScript come eseguire ogni singolo passaggio. Con il codice dichiarativo, noi diciamo a JavaScript cosa vogliamo sia fatto e lasciamo che JavaScript si occupi di eseguire i passaggi.

React è dichiarativo perché scriviamo il codice che vogliamo, e Reach si occupa di prendere il nostro codice dichiarativo ed eseguire tutti i passaggi necessari per ottenere il risultato desiderato in JavaScript/DOM.