Cos'è Virtual DOM?

• Virtual DOM è una rappresentazione in memoria del DOM reale. È un concetto utilizzato da React per prevenire aggiornamenti non necessari al DOM reale / effettivo dopo ogni modifica poiché gli aggiornamenti al DOM effettivo sono piuttosto costosi, dal punto di vista delle prestazioni.
• Il DOM virtuale è essenzialmente un albero dei nodi costituito da componenti React. Viene creato quando viene eseguita la funzione render () di React . Questo albero dei nodi elenca gli elementi DOM, i loro attributi e contenuti come oggetti e proprietà.
• Ogni volta che c'è un cambiamento nei dati (stato / oggetti di scena) dell'albero dei nodi esistente, cioè Virtual DOM, React crea un nuovo Virtual DOM per incorporare queste modifiche. Se non si osserva alcun cambiamento, il DOM virtuale rimane lo stesso. Solo quando il DOM virtuale cambia, viene confrontato con la rappresentazione DOM precedente. Se risulta diverso, il DOM effettivo viene aggiornato.

Quando le props / state di un componente cambiano, il metodo render () di React crea un nuovo DOM virtuale. React decide se apportare o meno modifiche al DOM effettivo in base alle differenze tra la rappresentazione DOM precedente e il DOM virtuale appena creato. Questo processo è noto come riconciliazione .

Funzionamento del DOM virtuale:

1. Ogni volta che i dati sottostanti cambiano, l'intera interfaccia utente viene nuovamente renderizzata nella rappresentazione DOM virtuale.

3. Al termine del calcolo, il DOM reale viene aggiornato con le sole modifiche apportate.

Algoritmi diversi:

La riconciliazione in React, ovvero se aggiornare o meno il DOM effettivo in base alle modifiche in Virtual DOM, si basa su molti algoritmi di differenza. Gli algoritmi di diffing allo stato dell'arte di solito hanno una complessità temporale di O (n3) .

Ciò significa che per 1000 elementi, React dovrebbe eseguire 1 MILIARDO di confronti per determinare se aggiornare o meno il DOM effettivo. Chiaramente, questo sarebbe troppo costoso, dal punto di vista delle prestazioni. Invece React ha alcuni algoritmi euristici che hanno una complessità temporale di O (n) basata su 2 ipotesi:

1. Due elementi di diverso tipo produrranno alberi differenti.
2. Gli sviluppatori possono indicare / suggerire quali elementi figlio possono essere stabili nei rendering con l'aiuto di un supporto chiave .

• L'aggiunta di chiavi agli elementi figlio in React può aiutare ad aggiornare in modo efficiente il DOM effettivo, poiché le chiavi forniscono identità stabili agli elementi figlio.
• Quando gli elementi figlio hanno chiavi, React usa le chiavi per confrontare i figli dell'albero dei nodi precedente, con i figli del nuovo albero dei nodi.
• Queste chiavi facilitano il lavoro di React nel determinare dove inserire, rimuovere o aggiornare i nodi figli, rendendolo così molto più efficiente.

<ul>
   <li key="996">Item 1</li>
   <li key="997">Item 2</li>
</ul>

<ul>
   <li key="995">Item 3</li>
   <li key="996">Item 1</li>
   <li key="997">Item 2</li>
</ul>

Nota: le chiavi devono essere stabili, prevedibili e univoche. Le chiavi instabili (come quelle prodotte da Math.random()) causeranno la ricreazione inutile di molte istanze di componenti e nodi DOM, il che può causare un degrado delle prestazioni e una perdita di stato nei componenti figlio.

Per maggiori dettagli su come funzionano questi algoritmi per vari tipi di elementi DOM, visita https://reactjs.org/docs/reconciliation.html