Wann kam das React Framework heraus?

Das React-Framework kam 2013 heraus; React entstand aus dem internen Projekt von Facebook und wurde im Mai 2013 als Open Source bereitgestellt. React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die hauptsächlich zum Erstellen von Benutzeroberflächen verwendet wird. Benutzer können in React verschiedene Arten von Parametern übergeben, z. B. Deklarationscodes, die Ihnen beim Rendern der Benutzeroberfläche helfen, statische HTML-DOM-Elemente oder dynamische Variablen und sogar interaktive Variablen Anwendungskomponenten.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

1. Der Ursprung und die Entwicklung von React

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Sie entstand aus einem internen Projekt von Facebook, da das Unternehmen nicht mit allen JavaScript-MVC-Frameworks auf dem Markt zufrieden war und beschlossen, Ihr eigenes Set zum Einrichten der Instagram-Website zu schreiben. Nachdem ich es erstellt hatte, stellte ich fest, dass diese Reihe von Dingen sehr nützlich ist, und so wurde sie im Mai 2013 als Open Source veröffentlicht.

2. Der Ausgangspunkt der React

HTML-basierten Front-End-Schnittstellenentwicklung wird immer komplexer und ihre wesentlichen Probleme lassen sich im Wesentlichen auf die effiziente Wiedergabe dynamischer Daten vom Server oder Benutzer zurückführen Eingaben in komplexe Benutzeroberflächen. Das React-Framework von Fackbook ist eine vollständig auf dieses Problem ausgerichtete Lösung. Laut der offiziellen Website wird es zum Entwickeln großer Anwendungen mit Daten verwendet, die sich im Laufe der Zeit ändern (Erstellen großer Anwendungen mit Daten, die sich im Laufe der Zeit ändern). Im Vergleich zur herkömmlichen Front-End-Entwicklung hat React einen völlig alternativen Ansatz eröffnet, um eine leistungsstarke und effiziente Entwicklung von Front-End-Schnittstellen zu erreichen.

React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet. Sie können in React verschiedene Arten von Parametern übergeben, z. B. Deklarationscodes, die Ihnen beim Rendern der Benutzeroberfläche helfen, statische HTML-DOM-Elemente, dynamische Variablen und sogar interaktive Anwendungskomponenten.

3. Die Beziehung zwischen Recat und traditionellem MVC

Leichte Ansichtsebenenbibliothek! Eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. React ist kein vollständiges MVC-Framework. Es kann höchstens als (Ansichts-)Ebene in MVC betrachtet werden. Selbst React erkennt das MVC-Entwicklungsmodell nicht vollständig Benutzeroberfläche. Es kann einfach verstanden werden, dass React die Schnittstelle in unabhängige kleine Blöcke unterteilt und jeder Block eine Komponente ist. Diese Komponenten können kombiniert und verschachtelt werden, um unsere Seite zu werden

4. Die Verkörperung der hohen Leistung von React: Virtuelles DOM Prinzip: Während unseres Entwicklungsprozesses müssen wir unvorhersehbare Daten in Echtzeit auf die Benutzeroberfläche übertragen und dann das DOM bedienen. Allerdings führt eine häufige oder komplexe Manipulation des DOM zu vielen Leistungsproblemen. ——Wie man komplexe DOM-Vorgänge mit hoher Leistung durchführt, ist normalerweise ein wichtiger Indikator für die Fähigkeiten eines Front-End-Entwicklers.

React führt hierfür den virtuellen DOM-Mechanismus (virtuelles DOM) ein: Eine Reihe von DOM-APIs werden auf der Browserseite mithilfe von Javascript implementiert. Bei der Entwicklung auf Basis von React erfolgt die gesamte DOM-Konstruktion über das virtuelle DOM. Immer wenn sich die Daten ändern, rendert React den gesamten DOM-Baum neu und vergleicht ihn mit dem vorherigen DOM-Baum , dann führen nur die Teile, die geändert werden müssen, das eigentliche Browser-DOM-Update durch. Darüber hinaus kann React die Aktualisierung des virtuellen DOM stapelweise verarbeiten. Wenn Sie beispielsweise den Knoteninhalt kontinuierlich von A-B, B-A ändern, geht React davon aus, dass A zu B wird, und dann noch einmal . Es gibt keine Änderung in der Benutzeroberfläche von B zu A, und wenn sie manuell gesteuert wird, ist diese Logik normalerweise äußerst kompliziert Neuimplementierung des Algorithmus (offizielle Website-Erklärung). Der Diff-Algorithmus wurde zuvor verwendet

Im vorherigen React war der Aktualisierungsprozess synchron, was zu Leistungsproblemen führen kann.

Wenn React beschließt, den Komponentenbaum zu laden oder zu aktualisieren, werden viele Dinge ausgeführt, z. B. das Aufrufen der Lebenszyklusfunktion jeder Komponente, das Berechnen und Vergleichen des virtuellen DOM und schließlich das Aktualisieren des DOM-Baums synchron ausgeführt, d. h. sobald ein Lade- oder Updatevorgang gestartet wird, wird dieser nicht mittendrin unterbrochen. Aufgrund der Single-Thread-Natur von JavaScript kommt es zu Verzögerungen, wenn der Komponentenbaum sehr groß ist und jede Synchronisierungsaufgabe zu lange dauert. Die Methode von React Fiber ist eigentlich sehr einfach – Sharding. Teilen Sie eine lange Aufgabe in viele kleine Teile auf. Obwohl die Gesamtzeit immer noch sehr lang ist, haben andere Aufgaben die Möglichkeit, sie auszuführen, sodass der einzige Thread entsteht wird nicht exklusiv sein und andere Aufgaben haben weiterhin die Möglichkeit, ausgeführt zu werden. 5. Funktionen und Vorteile von React die Struktur in Variablen umwandeln und Operationen ausführen

Und ReactJS definiert eine Reihe von Dom-Modellen in Form von Variablen. Dies reduziert die Notwendigkeit, den echten Dom zu betreiben. Was ist der wesentliche Unterschied zum Mainstream-MVC Framework? Es befasst sich nicht mit dem Dom

2. Komponentensystem

Die Kernidee von React ist, dass jeder Bereich oder jedes Element auf der Seite als Komponente betrachtet werden kann. Was ist also eine Komponente?

Komponente bezieht sich auf ein Aggregat, das gleichzeitig HTML-, CSS-, JS- und Bildelemente enthält

3 Einseitiger Datenfluss

Tatsächlich ist der Kerninhalt von ReactJS die Datenbindung. Die sogenannte Datenbindung bezieht sich auf das Binden einiger serverseitiger Daten an die Front-End-Seite, und Entwickler können sich nur auf die Implementierung der geschäftlichen JSX-Syntax konzentrieren

In Vue verwenden wir die Renderfunktion zum Erstellen Die Dom-Struktur der Komponente hat eine höhere Leistung, da sie den Prozess des Suchens und Kompilierens von Vorlagen durchläuft. Wenn ich jedoch createElement zum Erstellen einer Struktur in Render verwende, ist der Code derzeit weniger lesbar und stärker geladen. Sie können die JSX-Syntax verwenden, um Dom beim Rendern zu erstellen, wodurch dieses Problem gelöst wird. Die Voraussetzung ist jedoch, dass Sie Tools zum Kompilieren von jsx verwenden müssen

Das obige ist der detaillierte Inhalt vonWann kam das React Framework heraus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!