Ich bin der Hauptautor eines Virtual-Dom- Moduls, sodass ich möglicherweise Ihre Fragen beantworten kann. Es gibt tatsächlich 2 Probleme, die hier gelöst werden müssen
- Wann rendere ich neu? Antwort: Wenn ich feststelle, dass die Daten verschmutzt sind.
- Wie rendere ich effizient neu? Antwort: Verwenden eines virtuellen DOM zum Generieren eines realen DOM-Patches
In React hat jede Ihrer Komponenten einen Status. Dieser Status ähnelt einem beobachtbaren Status, den Sie möglicherweise in Knockout- oder anderen MVVM-Bibliotheken finden. Im Wesentlichen weiß React wann die Szene neu gerendert werden muss, da es beobachten kann, wann sich diese Daten ändern. Die schmutzige Prüfung ist langsamer als die beobachtbaren Werte, da Sie die Daten in regelmäßigen Abständen abfragen und alle Werte in der Datenstruktur rekursiv prüfen müssen. Im Vergleich dazu signalisiert das Festlegen eines Werts für den Status einem Listener, dass sich ein Status geändert hat, sodass React einfach auf Änderungsereignisse für den Status warten und das erneute Rendern in die Warteschlange stellen kann.
Das virtuelle DOM wird zum effizienten erneuten Rendern des DOM verwendet. Dies hängt nicht wirklich mit der schmutzigen Überprüfung Ihrer Daten zusammen. Sie können mithilfe eines virtuellen DOM mit oder ohne Dirty Checking erneut rendern. Sie haben Recht damit, dass die Berechnung des Unterschieds zwischen zwei virtuellen Bäumen einen gewissen Aufwand bedeutet. Beim virtuellen DOM-Unterschied geht es jedoch darum, zu verstehen, was im DOM aktualisiert werden muss und nicht, ob sich Ihre Daten geändert haben oder nicht. Tatsächlich ist der Diff-Algorithmus selbst ein Dirty Checker, aber er wird verwendet, um festzustellen, ob das DOM stattdessen Dirty ist.
Wir möchten den virtuellen Baum nur dann neu rendern, wenn sich der Status ändert. Die Verwendung eines Observable zur Überprüfung, ob sich der Status geändert hat, ist eine effiziente Methode, um unnötiges erneutes Rendern zu verhindern, was zu vielen unnötigen Baumunterschieden führen würde. Wenn sich nichts geändert hat, tun wir nichts.
Ein virtuelles DOM ist schön, weil wir damit unseren Code so schreiben können, als würden wir die gesamte Szene neu rendern. Hinter den Kulissen möchten wir eine Patch-Operation berechnen, die das DOM aktualisiert, um zu sehen, wie wir es erwarten. Obwohl der virtuelle DOM-Diff / Patch-Algorithmus wahrscheinlich nicht die optimale Lösung ist , bietet er uns eine sehr gute Möglichkeit, unsere Anwendungen auszudrücken. Wir erklären einfach genau, was wir wollen und React / virtual-dom wird herausfinden, wie Ihre Szene so aussehen kann. Wir müssen keine manuelle DOM-Manipulation durchführen oder uns über den vorherigen DOM-Status verwirren. Wir müssen auch nicht die gesamte Szene neu rendern, was viel weniger effizient sein könnte als das Patchen.
