CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 17 / 41

I cicli di rendering in React

Dopo aver effettuato il primo rendering, alla prima visualizzazione della pagina, React si ferma. Fino a quando? Fino a quando non viene chiamata una funzione setter.

Se clicchi sul bottone che dice “+”, vedrai apparire due nuovi log in console: entrambe le funzioni-componenti, App e Counter, sono state eseguite di nuovo!

 

Importante: potresti leggere in articoli e documentazione, che React effettua un rendering ogni volta che uno stato cambia. Questa cosa non è sempre vera: per le strutture dati non primitive, come array e oggetti, anche se una funzione setter viene chiamata con un valore identico al precedente, il rendering viene eseguito comunque. Per esempio, se counterValue fosse { value: 5 } e chiamassimo setCounterValue({ value: 5 }), il rendering accadrebbe anche se lo stato non è tecnicamente cambiato. Per non sbagliare, ipotizza che qualsiasi chiamata a una funzione setter causi un nuovo rendering.

 

Quando viene chiamata la funzione setter setCounterValue, React esegue di nuovo la trasformazione da JSX a JavaScript a codice HTML. Questa volta, però, invece di eliminare l’intero contenuto di <div id=”app” /> e rifare tutto da capo, React prende nota di cosa è cambiato tra la versione di “adesso” e quella risultante dal nuovo HTML, e modifica la pagina per applicare solo i cambiamenti. In questo caso, modificherà solo il contenuto dello <span> che si trova all’interno di Counter, quello che contiene {value}.

 

Quando React effettua rendering

React esegue il rendering di tutti i componenti visibili alla prima visualizzazione della pagina. Una volta finito il primo ciclo di rendering, quando viene chiamata una funzione setter, React esegue il rendering dei soli componenti che:

  • Hanno subito la modifica di almeno uno stato
  • Sono figli di un componente che è stato chiamato al rendering

Nel nostro caso, il componente App viene chiamato al rendering perché lo stato counterValue è cambiato, il componente Counter viene chiamato al rendering perché è figlio di App.

Quando progettiamo applicazioni React, in particolare la distinzione tra componenti controller e componenti view, è utile tenere a mente queste regole. Se tutta la logica della nostra applicazione fosse concentrata nel componente radice (quello che non ha genitori e contiene tutti i figli), allora ogni cambiamento causerebbe il rendering di tutti i componenti.

Nella programmazione front-end, le operazioni più lente sono quelle che modificano la pagina, e React ci aiuta molto modificando solo le cose che effettivamente sono cambiate dopo aver trasformato JSX in JavaScript e in HTML.

Noi, invece, possiamo aiutare React creando diversi componenti controller che gestiscono diversi stati, in modo da accorciare il percorso degli eventi che notificano i cambiamenti, diminuendo di conseguenza la quantità di componenti che vengono chiamati al rendering quando gli eventi causano cambiamenti di stato.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.