Sono l'autore principale di un modulo di dom virtuale , quindi potrei essere in grado di rispondere alle tue domande. In effetti, ci sono 2 problemi che devono essere risolti qui
- Quando posso eseguire nuovamente il rendering? Risposta: quando osservo che i dati sono sporchi.
- Come posso eseguire nuovamente il rendering in modo efficiente? Risposta: utilizzo di un DOM virtuale per generare una vera patch DOM
In React, ciascuno dei tuoi componenti ha uno stato. Questo stato è come un osservabile che potresti trovare in knockout o in altre librerie di stile MVVM. In sostanza, React sa quando eseguire nuovamente il rendering della scena perché è in grado di osservare quando questi dati cambiano. Il controllo sporco è più lento degli osservabili perché è necessario eseguire il polling dei dati a intervalli regolari e verificare ricorsivamente tutti i valori nella struttura dei dati. In confronto, l'impostazione di un valore sullo stato segnalerà a un ascoltatore che alcuni stati sono cambiati, quindi React può semplicemente ascoltare gli eventi di cambiamento sullo stato e mettere in coda il rendering.
Il DOM virtuale viene utilizzato per un efficiente rendering del DOM. Questo non è in realtà correlato al controllo sporco dei dati. È possibile eseguire nuovamente il rendering utilizzando un DOM virtuale con o senza controllo sporco. Hai ragione nel dire che c'è un sovraccarico nel calcolare la diff tra due alberi virtuali, ma la diff virtuale DOM riguarda la comprensione di ciò che deve essere aggiornato nel DOM e non se i tuoi dati sono cambiati o meno. In realtà, l'algoritmo diff è un controllo sporco stesso ma viene utilizzato per vedere se il DOM è invece sporco.
Il nostro obiettivo è di rendere nuovamente l'albero virtuale solo quando lo stato cambia. Quindi, usare un osservabile per verificare se lo stato è cambiato è un modo efficace per prevenire ricalcoli non necessari, che causerebbero molte differenze dell'albero non necessarie. Se nulla è cambiato, non facciamo nulla.
Un DOM virtuale è bello perché ci permette di scrivere il nostro codice come se dovessimo ridigitare l'intera scena. Dietro le quinte vogliamo calcolare un'operazione di patch che aggiorna il DOM per apparire come ci aspettiamo. Quindi, mentre l'algoritmo di diff / patch DOM virtuale probabilmente non è la soluzione ottimale , ci offre un modo molto piacevole per esprimere le nostre applicazioni. Dichiariamo esattamente ciò che vogliamo e React / virtual-dom elaborerà come far apparire la tua scena così. Non è necessario eseguire la manipolazione manuale del DOM o confondersi sul precedente stato DOM. Non è nemmeno necessario eseguire nuovamente il rendering dell'intera scena, il che potrebbe essere molto meno efficiente rispetto all'applicazione di patch.
