it-swarm.com.de

Hat React Native ein "virtuelles DOM"?

Aus ReactJS Wiki Seite zu Virtual DOM:

React erstellt einen Cache für die Zwischenspeicherung der Datenstruktur und berechnet die Unterschiede, und aktualisiert dann das angezeigte DOM des Browsers effizient. Dies erlaubt dem Programmierer, Code so zu schreiben, als wäre er Die gesamte Seite wird bei jeder Änderung gerendert, während nur die React-Bibliotheken Rendern Sie Unterkomponenten, die sich tatsächlich ändern.

Mit Virtual DOM können wir also die Leistung verbessern, indem direkte Manipulationen mit DOM vermieden werden.

Aber was ist mit React Native ?

Wir wissen, dass es theoretisch auf anderen Plattformen native Ansichten und UI-Komponenten gibt. Es gibt nichts über DOM selbst. Können wir also sagen, dass React Native dort "Virtual DOM" hat oder wir reden über etwas anderes?

Zum Beispiel gibt es eine section in Weex specs, die Methoden beschreibt, um direkt mit dem DOM-Baum zu arbeiten. Und ich gehe davon aus, dass React Native möglicherweise auch eine Art DOM-Baum sowie eine "Virtual DOM" -Abstraktionsschicht haben sollte, die die Hauptidee von React selbst ist.

Meine Frage ist also: 

Hat React Native eine Art "virtuelles DOM" (oder dessen Darstellung) und wenn ja, wie wird dieses "virtuelle DOM" auf verschiedene Plattformen portiert?

UPDATE:

Das Ziel dieser Frage ist es, ein Licht darauf zu werfen, wie React Native das Rendering nativer UI-Komponenten verwaltet. Gibt es einen bestimmten Ansatz und wenn ja, wie heißt es offiziell?

UPDATE 2:

Dieser Artikel beschreibt die neue React-Architektur namens Fiber , die wie die Antwort auf diese Frage aussieht.

21
oleh.meleshko

Zusamenfassend

Nun, im Grunde genommen, ja, genau wie Reactjs Virtual DOM erstellt React-Native eine Baumhierarchie, um das anfängliche Layout zu definieren, und erstellt bei jeder Layoutänderung einen Unterschied dieses Baums, um die Renderings zu optimieren. Mit Ausnahme von React-Native werden die Aktualisierungen der Benutzeroberfläche durch mehrere Architekturebenen verwaltet, die am Ende die Darstellung von Ansichten übersetzen, wobei versucht wird, die Änderungen auf ein Minimum zu optimieren, um ein möglichst schnelles Rendern zu ermöglichen.

Eine ausführlichere Erklärung

Um zu verstehen, wie reagieren native Ansichten im Hintergrund erzeugen, müssen Sie die Grundlagen verstehen, und dafür möchte ich lieber von vorne anfangen

1. Die Yoga-Layout-Engine

Yoga ist eine plattformübergreifende Layout-Engine, die in C geschrieben ist und Flexbox über Bindungen zu den systemeigenen Ansichten implementiert. (Java-Android-Ansichten/Objective-C iOS UIKit).

Alle Layoutberechnungen der verschiedenen Ansichten, Texte und Bilder in React-Native werden durch Yoga durchgeführt. Dies ist im Grunde der letzte Schritt, bevor unsere Ansichten auf dem Bildschirm angezeigt werden

2. Schattenbaum/Schattenknoten

Wenn reaktives System die Befehle zum Rendern des Layouts sendet, wird eine Gruppe von Schattenknotenpunkten zu einem Schattenbaum zusammengesetzt, der die veränderliche native Seite des Layouts darstellt (z. B. in der entsprechenden jeweiligen Muttersprache, Java für Android und Objective-C für iOS), das dann in die tatsächlichen Ansichten auf dem Bildschirm (mit Yoga) übersetzt wird.

3. ViewManager

Der ViewManger ist eine Schnittstelle, die die vom JavaScript gesendeten Ansichtstypen in ihre nativen UI-Komponenten zu übersetzen weiß .. Der ViewManager weiß, wie er einen Schattenknoten, einen nativen Ansichtsknoten erstellt und die Ansichten aktualisiert Im Rahmen von React-Native gibt es eine Menge ViewManager, die die Verwendung der systemeigenen Komponenten ermöglichen. Wenn Sie zum Beispiel eine neue benutzerdefinierte Ansicht erstellen und diese zu reaktionsnah hinzufügen möchten, wird diese Ansicht verwendet müssen die ViewManager-Schnittstelle implementieren

4. UIManager

Der UIManager ist das letzte Teil des Puzzles, oder eigentlich das erste . Die deklarativen JavaScript-Befehle für JSX werden als zwingende Befehle an die native gesendet, die React-Native anweisen, wie die Ansichten Schritt für Schritt iterativ ..__ festgelegt werden. Als erstes Rendering sendet der UIManager den Befehl zum Erstellen der erforderlichen Ansichten und sendet weiterhin die Update-Diffs, wenn sich die Benutzeroberfläche der App im Laufe der Zeit ändert.

React-Native verwendet also grundsätzlich noch die Fähigkeit von Reactjs, die Differenz zwischen der vorherigen und der aktuellen Darstellung zu berechnen, und sendet die Ereignisse entsprechend an den UIManager

Um mehr über den Prozess zu erfahren, empfehle ich folgende Präsentation von Emil Sjölander von der React-Native EU 2017 Konferenz in Breslau 

15
Samer Murad

Ich weiß nicht, ob dies die Antwort auf Ihre Frage ist, aber ich habe dies in der den offiziellen React-Dokumenten gefunden:

React erstellt und verwaltet eine interne Darstellung der gerenderten Benutzeroberfläche. Es enthält die React-Elemente, die Sie von Ihren Komponenten zurückgeben. Durch diese Darstellung kann React es vermeiden, DOM-Knoten zu erstellen und auf vorhandene Knoten zuzugreifen, da dies langsamer sein kann als Operationen an JavaScript-Objekten. Manchmal wird es als "virtuelles DOM" bezeichnet, aber bei React Native funktioniert es genauso.

Ich würde also sagen, dass es ja eine sehr ähnliche interne Darstellung wie in React.js gibt. Dann schätze ich, dass JavaScript-APIs verwendet werden, um native Ansichten zu rendern, genau wie den Artikel, den Sie gelesen haben schlägt vor.

EDITDieser Beitrag bereitgestellt von Sebas in einem Kommentar ist auch deshalb interessant, weil ein Mitglied des React (und React Native) -Teams sagt:

React Native zeigt, dass es bei ReactJS immer mehr um "Zero DOM" als um "virtuelle DOM" ging (entgegen der landläufigen Meinung).

Es scheint, als sei das sogenannte "React Virtual DOM" einer internen Struktur/Darstellung der Elemente, die verschiedenen Technologien zugeordnet werden können, viel näher als einem HTML-DOM.

4
César Landesa

Dieser Artikel beschreibt die neue React-Architektur mit dem Namen Fiber . Es scheint die richtige Antwort darauf zu sein, was in "React Native" vor sich geht, oder zumindest, was "React Native" in nächster Zukunft zu erreichen versucht.

Das DOM ist nur eine der Rendering-Umgebungen, in die React gerendert werden kann Die anderen Hauptziele sind native iOS- und Android-Ansichten über React Native (Deshalb ist "virtuelles DOM" ein bisschen irreführend.)

Der Grund, warum so viele Ziele unterstützt werden können, liegt darin, dass React so dass Abgleich und Rendern getrennte Phasen sind. Das Der Abgleich erledigt die Arbeit, zu berechnen, welche Teile eines Baumes haben geändert; Der Renderer verwendet diese Informationen dann zur Aktualisierung von die gerenderte app.

Diese Trennung bedeutet, dass React DOM und React Native ihre .__ verwenden können. eigene Renderer, während sie denselben Abgleich freigeben, bereitgestellt von React Ader.

Fiber implementiert den Abgleich neu.

1
oleh.meleshko

Hier ist eine übermäßige Vereinfachung: ReactJS gibt das DOM aus, mit dem die Browser gerendert werden können. Wie Sie bereits wissen, hilft das virtuelle DOM, ReactJS effizient das Delta der Änderungen zu verfolgen. Bei React Native für iOS gibt es schließlich UIKit-Code aus. Dasselbe gilt für React Native für Android, aber anstatt DOM oder UI Kit auszugeben, wird die Ausgabe mit Android-SDKs erstellt. Das virtuelle DOM ist also nur ein Zwischenschritt. Es kann als eine Kombination der internen Datenstruktur betrachtet werden, in der die Daten enthalten sind, die beschreiben, wo die Schaltfläche und das Textfeld gerendert werden sollen, was passiert, wenn Sie auf die Schaltfläche tippen usw. und ein effizienter Algorithmus zum Verfolgen der Änderungen. Derselbe Code kann für alle Plattformen verwendet werden. Nur der letzte Schritt ist anders. Abhängig von der Plattform hat es Code, der den DOM, den UIKit-Code oder den Namen der Android-UI-lib generiert. 

1