Erste Einführung in React

Erste Einführung in React

Ich erinnere mich vage daran, 2015 an einer Offline-Veranstaltung teilgenommen zu haben und das Wort React zum ersten Mal gehört zu haben. Der damalige Redner war Guo Dafeng, der ein Video über die Leistung von Ember abspielte , eckig und reagieren. Vergleichsvideo: React.js Conf 2015. Zu dieser Zeit beschäftigte ich mich hauptsächlich mit der Entwicklung von AngularJS und war mir des Schmerzes der Leistungsprobleme von Angular bewusst, wenn die Seite komplex war. Nachdem ich den Leistungsvergleich in diesem Video gesehen hatte, war ich sofort von React beeindruckt. Sehen wir uns nun gemeinsam React an.

Bibliothek anzeigen

React unterscheidet sich von MVC-Frameworks wie AngularJS und Backbone. Es handelt sich um eine von Facebook gestartete Javascript-Bibliothek zum Erstellen von Benutzeroberflächen Die Ansichtsschicht (das V in MVC) ist eine Bibliothek, die zum Erstellen wiederverwendbarer Front-End-UI-Komponenten verwendet wird. Wenn sich die Daten ändern, aktualisiert und rendert React gleichzeitig die entsprechenden Komponenten zeitnah und effektiv. Bei immer komplexeren Frontend-Schnittstellen, insbesondere bei Webanwendungen, bei denen sich Daten ständig ändern, kann React die sich ändernden Daten auf der Seite effizient und genau wiedergeben.

Zustandsmaschine anzeigen

In herkömmlichen Webanwendungen müssen Änderungen in DOM-Knoten synchronisiert werden, wenn sich Daten ändern:

UI = f (Zustände)

Wenn sich der Schnittstellenstatus ändert, aktualisiert und rendert React die entsprechenden Komponenten entsprechend dem angegebenen Status. Die Rendering-Leistung desselben Status ist konsistent.

JSX

In herkömmlichen Webanwendungen werden Vorlagen oder HTML-Anweisungen zum Erstellen von Benutzeroberflächen verwendet. React verwendet jedoch die deklarative Schreibmethode JSX (eine XML-ähnliche Syntax, die ECMAScript erweitert), was Vorteile gegenüber Vorlagen:

JavaScript ist eine flexible, hoch skalierbare Programmiersprache

Vereinheitlicht die Seitenauszeichnungssprache und die Ansichtslogik, sodass Ansichten einfacher zu erweitern und zu verwalten sind

Es gibt kein String-Splicing, und der Ansichtsinhalt wird in JavaScript integriert, um das Vorhandensein von XSS-Schwachstellen zu reduzieren

Effiziente Aktualisierung

Wenn sich der Anwendungsstatus ändert, kann React Komponenten und Schnittstellen effizient aktualisieren und rendern:

Virtuelles DOM: Verwenden Sie leichte Beschreibungsobjekte im Speicher, um die Struktur und den Stil echter DOM-Knoten durch Javascript darzustellen

Differenzalgorithmus: Erzeugen Sie effizient und schnell einen Mindestsatz an Diff-Bäumen

Batch-Update: Mehrere Statusaktualisierungen effektiv zu einem Aktualisierungsvorgang zusammenführen

React verwendet virtuelles DOM, um ein reales DOM zu beschreiben. Wenn sich der Anwendungsstatus ändert, wird durch einen effizienten Differenzalgorithmus ein Mindestsatz an Diff-Bäumen erstellt und mehrere Aktualisierungsvorgänge zusammengeführt Erstens werden direkte Vorgänge im eigentlichen DOM reduziert, wodurch die Leistung erheblich verbessert wird.

Ereignis-Proxy

React verwendet einen Ereignis-Proxy-Mechanismus, der die Konsistenz des Ereignis-Bubblings und der browserübergreifenden Ausführung aufrechterhalten und sogar HTML5-Ereignisse in IE8 verwenden kann. React implementiert eine „synthetische Ereignisschicht“, die die Kompatibilitätsprobleme zwischen der IE- und W3C-Standardimplementierung beseitigt. Über JSX gebundene Ereignisse sind an „synthetische Ereignisse“ gebunden. „Synthetische Ereignisse“ werden durch Ereignisdelegation an die oberste Ebene der Komponente gebunden, und die gebundenen Ereignisse werden beim Entladen der Komponente automatisch zerstört.

Einseitiger Fluss von Flux

Flux ist eine von Facebook eingeführte Anwendungsarchitektur, die einen einseitigen Datenfluss befürwortet:

Werfen wir einen Blick auf das Datenflussdiagramm unter der MV*- und Flux-Anwendungsarchitektur:

MV*

Flux

Wie wir aus der obigen Abbildung ersehen können, macht der einseitige Datenfluss von Flux den Anwendungsstatus vorhersehbar und nachvollziehbar und kann leicht die folgenden Ziele erreichen:

Einfach zu testen Reproduzierbarkeit und Reproduzierbarkeit

Diagnose-Debugging basierend auf Zeitreisen

Rückgängig- und Wiedergabefunktion

isomorph/universal

React kann auf dem Server verwendet werden. Führen Sie es aus, um SEO zu erreichen Optimierung, Erlebnisoptimierung, Leistungsoptimierung und andere Zwecke. Wir müssen React nur einmal lernen und können es überall schreiben. Sie können es zum Schreiben von Web-, Mobil-, VR- und anderen Anwendungen verwenden.