Warum erschien React? Einführung in den historischen Hintergrund der Entstehung von React

In diesem Artikel geht es hauptsächlich um die Gründe für die Geburt von React, warum React erschien, die historischen Hintergrundinformationen von React usw. Lassen Sie uns diesen Artikel nun gemeinsam lesen

Der Grund Warum wurde React geboren?

React ist eine von Facebook entwickelte JS-Bibliothek. Warum hat Facebook also React erstellt?
Facebook ist der Ansicht, dass MVC aufgrund seiner sehr großen Codebasis und seiner riesigen Organisation schnell komplex wird, wenn eine neue Funktion oder Funktion hinzugefügt werden muss Die Serie führte dazu, dass der Code spröde und unvorhersehbar wurde und ihre MVC infolgedessen auseinanderfiel. Ich denke, dass MVC nicht für groß angelegte Anwendungen geeignet ist. Wenn das System viele Modelle und entsprechende Ansichten enthält, nimmt seine Komplexität schnell zu, was es sehr schwierig macht, es zu verstehen und zu debuggen, insbesondere da zwischen Modellen und Ansichten möglicherweise ein bidirektionaler Datenfluss besteht.

Um dieses Problem zu lösen, muss „der Code auf eine Weise organisiert werden, um ihn vorhersehbarer zu machen“, was mit Flux und React erreicht wurde

Flux ist eine Systemarchitektur, Wird verwendet, um den unidirektionalen Datenfluss in Anwendungen zu fördern. React, ein JavaScript-Framework zum Erstellen „vorhersehbarer“ und deklarativer „Web-Benutzeroberflächen“, hat es Facebook ermöglicht, Webanwendungen schneller zu entwickeln.

Besprechen Sie hauptsächlich React-Probleme:
Welche Probleme werden mit React gelöst? Auf der offiziellen Website heißt es:

Wir bauen React auf Lösen Sie ein Problem: Erstellen großer Anwendungen mit Daten, die sich im Laufe der Zeit ändern. Beschreiben Sie einfach, wie die Anwendung zu jedem Zeitpunkt aussehen soll, und React verwaltet automatisch Aktualisierungen der Benutzeroberfläche, wenn sich die Daten ändern 🎜> 2. Wenn sich die Daten ändern, aktualisiert React tatsächlich nur einen Teil der Änderung

Bei React geht es um die Erstellung wiederverwendbarer Komponenten. Tatsächlich geht es bei der Verwendung von React um mehr als nur um die Erstellung von Komponenten. Durch die Kapselung wird die Wiederverwendung, Prüfung und Trennung von Code erleichtert.

Auf der offiziellen Website von React haben wir unter „Warum haben wir React erstellt?“ mehr über die vier Gründe für die Erstellung von React-Dokumenten erfahren:

1. React ist eine Bibliothek zum Erstellen zusammensetzbarer Benutzeroberflächen. Es fördert die Erstellung wiederverwendbarer UI-Komponenten, die Daten im Laufe der Zeit ändern.

2. React verwendet keine Vorlagen

Traditionell werden Webanwendungs-Benutzeroberflächen mithilfe von Vorlagen oder HTML-Anweisungen erstellt. Diese Vorlagen geben einen vollständigen Satz von Abstraktionen an, mit denen Sie Ihre Benutzeroberfläche erstellen können
Im Gegensatz zu React, das die Erstellung von Benutzeroberflächen übernimmt, indem es sie in Komponenten aufteilt. Das bedeutet, dass React eine echte, voll funktionsfähige Programmiersprache zum Rendern von Ansichten verwendet.
3. Responsive Updates sind sehr einfach.

In einer herkömmlichen JS-Anwendung müssen Sie Datenänderungen berücksichtigen und dann das DOM anweisen, Änderungen vorzunehmen, um es auf dem neuesten Stand zu halten. Sogar AngularJS bietet eine deklarative Schnittstelle über Direktiven und Datenbindung, um eine zugehörige Funktion zum manuellen Aktualisieren von DOM-Knoten anzufordern. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte

React Reference Manual

der PHP-Website für Chinesisch)

React verwendet verschiedene Methoden, wenn die Komponente zum ersten Mal initialisiert wird Die Methode wird aufgerufen, um zu versuchen, eine leichte Leistung zu generieren. Durch diese Darstellung wird eine Tag-Zeichenfolge generiert und dann in das Dokument eingefügt. Wenn sich die Daten ändern, wird die Render-Methode erneut aufgerufen. Um die Aktualisierung so effizient wie möglich abzuschließen, vergleichen wir den vom Render-Aufruf zurückgegebenen Wert mit dem neuen Wert und nehmen dann eine minimale Änderung am angewendeten DOM vor.




Die von render zurückgegebenen Daten sind weder ein String noch ein DOM-Knoten. Es handelt sich um einen leichtgewichtigen Typ, der beschreibt, wie das DOM aussehen soll.

4.HTML5 ist nur der Anfang
Da React über eine eigene leichte Dokumentdarstellung verfügt, können wir einige coole Dinge damit machen

1. Facebook dynamisches Formular HTML kann sein ersetzt durch Rendering.

2. Instagram ist eine „Single-Page“-Webanwendung, die vollständig mit React und Backbone.Router erstellt wurde. Designer können React-Code wie gewohnt mit JSX schreiben.

3. Ich habe eine interne Prototypanwendung erstellt, auf der React auf einer Web-Workstation ausgeführt wird, und dabei React verwendet, um native iOS-Ansichten über eine Objective-C-Brücke zu steuern.

4. Sie können React auf dem Server ausführen, was SEO, Leistung, Code-Sharing und Projektflexibilität erleichtert.

5. Ereignisse sind in allen modernen Browsern (einschließlich IE8) konsistent und standardisiert, und die Ereignisdelegierung wird automatisch verwendet.

Die Hauptprinzipien von React

Virtuelles DOM und virtuelles DOM
In herkömmlichen Webanwendungen werden DOM-Vorgänge normalerweise direkt aktualisiert, aber wir wissen, dass DOM-Aktualisierungen normalerweise teuer sind. Um Vorgänge am DOM so weit wie möglich zu reduzieren, bietet React eine andere und leistungsstarke Möglichkeit, das DOM zu aktualisieren, anstatt das DOM direkt zu bedienen. Es handelt sich um Virtual DOM, ein leichtgewichtiges virtuelles DOM, das ein von React abstrahiertes Objekt ist und beschreibt, wie das DOM aussehen und wie es dargestellt werden soll. Verwenden Sie dieses virtuelle DOM, um ein realeres DOM zu aktualisieren, und dieses virtuelle DOM verwaltet echte DOM-Updates.
Warum kann es durch diese zusätzliche Ebene virtueller DOM-Operationen schneller gehen? Dies liegt daran, dass React über einen Diff-Algorithmus verfügt, der nicht garantiert, dass er sich sofort auf das reale DOM auswirkt, und dann diesen Diff-Algorithmus verwendet, um den kleinsten Wert durch Vergleich mit dem aktuellen neuen zu berechnen DOM-Darstellung mit den vorherigen Schritten zum Aktualisieren des echten DOM.

React Diff

1 Das virtuelle DOM stellt sicher, dass nur die tatsächlichen DOM-Operationen an den Teilen der Schnittstelle ausgeführt werden, die sich tatsächlich ändern.
Webseiten bestehen aus DOM-Bäumen. Wenn sich ein bestimmter Teil davon ändert, entspricht dies tatsächlich einer Änderung eines bestimmten DOM-Knotens. In React besteht die Idee beim Erstellen einer UI-Schnittstelle darin, die Schnittstelle basierend auf dem aktuellen Status zu bestimmen. Die beiden Zustände davor und danach entsprechen den beiden Schnittstellen, und dann vergleicht die Reaktion die Unterschiede zwischen den beiden Schnittstellen.
Die Facebook-Ingenieure haben zwei einfache Annahmen über die Webschnittstelle getroffen, die die Komplexität des Diff-Algorithmus direkt auf O(n) reduziert haben.
1 Zwei identische Komponenten erzeugen ähnliche DOM-Strukturen, und verschiedene Komponenten erzeugen ähnliche DOM-Strukturen DOM-Strukturen
2. Für eine Gruppe untergeordneter Knoten auf derselben Ebene können sie durch eindeutige IDs unterschieden werden

Verschiedene Knotentypen werden vor und nach derselben Position des Knotens ausgegeben und reagieren direkt löscht die vorherigen Knoten und erstellt und fügt dann einen neuen Knoten ein. Wenn unter dem gelöschten Knoten untergeordnete Knoten vorhanden sind, werden diese auch vollständig gelöscht später vom Benutzer verglichen

Wenn React am selben Ort auf verschiedene Komponenten trifft, zerstört es einfach die erste Komponente und fügt die neu erstellte Komponente hinzu. Unterschiedliche Komponenten erzeugen im Allgemeinen unterschiedliche DOM-Strukturen, da ihre Strukturen grundsätzlich nicht gleichwertig sind. Es ist besser, eine vollständig neue Komponente zu erstellen.

2. Knoten Ebene für Ebene vergleichen
In React ist der Baumalgorithmus sehr einfach. Zwei Bäume vergleichen nur Knoten auf derselben Ebene. Vergleichen Sie den vorherigen Baum und den geänderten Baum auf derselben Knotenebene. React vergleicht alle untergeordneten Knoten unter demselben übergeordneten Knoten. Wenn festgestellt wird, dass ein Knoten nicht mehr vorhanden ist, werden der Knoten und seine untergeordneten Knoten vollständig gelöscht und es wird kein weiterer Vergleich durchgeführt. Daher kann der Vergleich der DOM-Struktur abgeschlossen werden, solange der Baum einmal durchlaufen wird .

React berücksichtigt nur die Positionstransformation von Knoten auf derselben Ebene und nur das einfache Löschen und Erstellen von Knoten auf verschiedenen Ebenen. Wenn der Wurzelknoten feststellt, dass A im untergeordneten Knoten fehlt, wird A direkt zerstört. Wenn D feststellt, dass er einen weiteren untergeordneten Knoten hat, wird A als untergeordneter Knoten erstellt.

Um eine stabile Struktur aufrechtzuerhalten, die zur Verbesserung der Leistung beiträgt, können wir einen Knoten über CSS ausblenden oder anzeigen, anstatt DOM-Knoten tatsächlich zu entfernen oder hinzuzufügen.

Für Knoten desselben Typs ist der Algorithmus relativ einfach und React setzt seine Eigenschaften zurück, um eine Knotenkonvertierung zu erreichen.
Zum Beispiel:
renderA:

renderB:

Das Stilattribut des virtuellen DOM ist etwas anders, sein Wert ist keine einfache Zeichenfolge, sondern muss ein Objekt sein.

3. Vergleich von Listenknoten:
React zerstört und erstellt Knoten neu, wenn sie sich nicht auf derselben Ebene befinden, auch wenn sie genau dieselben Listenknoten sind, wenn sie sich auf derselben Ebene befinden . Diff-Algorithmus,

Wenn der Schlüsselwert dieses Li nicht festgelegt ist, führt dies zu Leistungsproblemen, wenn die Liste aktualisiert wird. React kann diese Liste nicht sehr effizient aktualisieren

Komponenten. Der Knoten der Komponente

im DOM-Baum wird als Element bezeichnet, aber hier ist es anders. Er wird im virtuellen DOM als Komponente bezeichnet. Der Knoten von Virtual DOM ist eine vollständige abstrakte Komponente, die aus Komponenten besteht.

Die Verwendung von Komponenten ist in React äußerst wichtig, da die Existenz von Komponenten die Berechnung von DOM-Differenzen effizienter macht.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). .

Das obige ist der detaillierte Inhalt vonWarum erschien React? Einführung in den historischen Hintergrund der Entstehung von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!