Der Zweck und die Bedeutung von React Web sind sehr klar: Lassen Sie den nativen Code von React im Web ausführen und lassen Sie eine Reihe von Code in verschiedenen mobilen Terminals ausgeführt. Für das Front-End und das Geschäft ist dies eine qualitative Verbesserung der Entwicklungseffizienz. In den frühen Phasen des Projekts haben wir das React -Team auch mit ähnlichen Fragen konsultiert. Der Kernklassenkamerad ihres Teams @vjeux fand dies auch eine sehr coole Sache und was sie in Zukunft tun wollten. Wenn Sie möglicherweise für Android reagieren, kann React Web veröffentlicht werden. (Yy)
Technische Architektur
Es gibt mehrere Anpassungslösungen, die auf React Native basieren:
1. Entwickeln Sie einen Brückenstandard, und RN und RW implementieren jeweils optimal diese Standards.
Basierend auf Flex -Layout implementieren wir beispielsweise einen konsistenten Satz von Flex -Komponenten, <flex>, <cell> usw.
2. RW ist vollständig mit RN ausgerichtet und implementiert alle APIs, die RN implementieren kann.
In der Diskussion wurde letzteres schließlich ausgewählt.
Aufgrund des Konzepts von React Web lassen Sie den React Native Code auf der Webseite feststellen, dass RW nur ein Konstruktions- und Verpackungsinstrument ist, das von RN getrennt ist, und die Implementierung von RW ist nicht von großer Bedeutung. Dann ist die technische allgemeine Richtung sehr klar: Um RN -konsistente Stil, Komponente und API zu implementieren und schließlich über das Konstruktionstool in eine Webversion zu kompilieren.
Beispiel
Schauen wir uns den Erstellungsprozess des React -Webprojekts an:
Schritt 1: Installieren Sie React Web und führen Sie die zugehörige Konfiguration durch
In diesem Schritt wird hauptsächlich React-Web-Pakete und verwandte Abhängigkeiten installiert und Webpack-Verpackungsskripte konfiguriert.
Um diesen Schritt zu vereinfachen, haben wir das Befehlszeilen-Tool React-Web-CLI entwickelt, für das nur zwei Befehlszeilen ausgeführt werden müssen. Gleichzeitig unterstützt das Befehlszeilen -Tool auch das Starten des Debugging -Servers, der Verpackung und anderer Funktionen, die später eingeführt werden.
Installieren Sie CLI -Tools:
NPM Installation React-Web-Cli -g
Installieren und Konfigurieren von React Web usw.:
React-Web init <aktuelles Projektverzeichnis>
Nach Abschluss der Ausführung werden die npm -Installationsbibliotheken in Ihrem Projektverzeichnis erstellt, und die Datei web/webpack.config.js wird automatisch mit einer schriftlichen Konfiguration erstellt. Zu diesem Zeitpunkt lautet die Verzeichnisstruktur:
.├── readme.md├── Android/├── Index.android.js├── Index.ios.js├── iOS/├── Package.json└─kopf Web/└── WebPack.config.js
Schritt 2: Fügen Sie die Eintragsdatei hinzu und erstellen Sie relevante Konfigurationen
Jedes Projekt muss über eine Eintragsdatei verfügen, mit der normalerweise andere Komponenten eingeführt und aufgerufen und das Projekt initialisiert werden, wie z. Um die Spezifikation "React Native Datei" zu entsprechen, erstellen wir einen Index.Web.js als Eintragsdatei und müssen angeben, dass die Datei die Eintragsdatei in WebPack ist. Öffnen Sie die Datei web/webpack.config.js und ändern Sie die Konfigurationsvariable:
var config = {paths: {src: path.join (root_path, '.'), index: path.join (root_path, 'index.web'),},};Dann erstellen wir die Datei index.web.js. Diese Datei ist tatsächlich sehr ähnlich wie bei index.ios.js, ist jedoch etwas anders. Der Hauptunterschied besteht darin, dass iOS nur Appregistry.registerComponent ('Awes', () => Awes) benötigt; Damit den nativen Code von Xcode Ihren JS -Code empfangen und verarbeiten kann, muss die Webseite in den DOM -Knoten eingefügt werden, bevor sie verwendet werden kann. Daher müssen wir den folgenden Code am Ende des Index.Web.js hinzufügen:
Appregistry.registerComponent ('awes', () => awes); if (plattform.os == 'web') {var app = document.createelement ('div'); document.body.appendchild (App); Appregistry.runapplication ('Awes', {Roottag: app});}Anschließend muss die Plattformkomponente im oberen Anforderungsabschnitt eingeführt werden. Auf diese Weise wurde der Konfigurationsteil verarbeitet. Führen Sie den Befehl React-Web Start aus, um den Debugging-Server zu starten!
Sie können es nach Belieben ändern, es ist fast die Erfahrung im React Native -Simulator.
Schritt 3: Testen und verpacken Sie den Webversionscode
Wenn Sie die Webseite geändert und entwickelt und getestet haben, können Sie sie verpacken und veröffentlichen. Die vom React-Web-Cli-Tool verpackten Befehle sind:
React-Web-Bundle
Nach der Verpackung wird die Datei im Web/ Ausgang/ Verzeichnis gespeichert. Sie können index.html direkt öffnen (wenn die App Operationen angefordert hat, müssen Sie sie vom lokalen Server überprüfen) und dann nach der Überprüfung veröffentlichen.
Was ist während dieses Prozesses passiert?
Neugierige Schüler haben möglicherweise einige Fragen, wenn sie dies sehen. Was hat einige Befehle des obigen Befehlszeilen -Tools getan? Warum reagiert React Webpaket den nativen Code in einer Kopie des auf der Webseite verwendeten Codes? Ist React Web sicher und zuverlässig? Was sind die Dinge im Inneren?
Hier werde ich kurz die Implementierungsprinzipien von React Web und die tatsächlich getanen Schritte vorstellen.
React Web implementiert reagierte native Komponenten auf der Webseite
React trennt den Code von der Plattformumgebung und fügt eine Ebene hinzu, so dass Entwickler auf der Plattformumgebungsebene eine gewisse Verarbeitung durchführen können, sodass sich der gleiche Code an mehr Plattformumgebungen usw. anpassen kann.
Zum Beispiel schreibt React-Canvas Code nach Reacts Syntax, führt eine gewisse Verarbeitung auf der Plattformumgebungsebene durch (führt Ihren React-Code aus und macht ihn mit Canvas) und erreicht dann spezifische Ziele (die Leistung auf der mobilen Seite verbessert).
In React Native gilt dies auch für ein Stück Code, das gleichzeitig auf iOS und Android ausgeführt werden kann. Das React Native -Team hat eine gewisse Verarbeitung in der nativen App der entsprechenden Plattform durchgeführt, mit der Code analysiert werden kann, die die React -Syntax ausführt.
Es gibt auch isomorphe Anwendungen. Der Server verwendet React + node.js, um HTML zu generieren, und der Client verwendet React, um clientbezogene Interaktionen und Funktionen zu erhalten. Das gleiche ist wahr.
Zu diesem Zweck begann die React V0.14.x-Version mit zwei Bibliotheken, React und React-DOM, die tatsächlich die spezielle Behandlung der Browser-Plattform weggezogen und sie allein in die React-DOM-Bibliothek verwandelten.
Das Besondere an React Native ist, dass die Implementierung der Komponente mit niedrigster Ebene die Implementierung von Native ist, sodass sie keine Tags wie Span und Div unterstützt. Animation usw. auch direkt nativ für die Schnittstellenwiedergabe aufrufen. Daher wird die Webseite nicht unterstützt, aber die meisten Komponenten können mithilfe von Webtechnologie simuliert und implementiert werden. Animation kann in CSS3 verwendet werden. Grundlegende Elemente können mit demselben HTML-Tag simuliert werden, das Probleme mit Layout und Kompatibilität in CSS behandelt werden können. Daher muss das React-Web nur die Reaktionskomponenten mithilfe von Webtechnologie erneut implementieren, und mit Hilfe von React dieser Ebene kann ein Stück Code auf mehreren Plattformen implementiert werden.
Um ein sehr einfaches Beispiel zu geben, die Textkomponente:
Die Implementierung von React Native nennt viele der zugrunde liegenden Code -Implementierungen von React Native.
Verwenden Sie für die Webseite einfach das <span> -Tag, um eine Textzeile auszugeben, sodass die Implementierung von React Web direkt ein <Pan> Tag erstellt, und es ist in Ordnung, einige Ereignisse oder so etwas zu binden.
Sie können native reag -Komponenten verwenden, die mit Zuversicht in der UI -Explorer -Demo ausgeführt werden können.
Webpack hilft Ihnen, die Verpackungsziele zu wechseln
Müssten wir nicht alle erforderlichen ("React-Nates") in den Komponenten ersetzen, die mit der erforderlichen ("React-Web" verpackt werden müssen ("React-Web")? Wie kann ich ansonsten meine Webkomponenten verwenden, um sie zu verpacken?
Das leistungsstarke Webpack verfügt über Alias -Konfigurationselemente, mit denen Sie dieses Problem lösen können:
Resolve: {alias: {'React-nativ': 'React-Web', 'Reactnativeart': 'React-Art',}, Erweiterungen: ['', .js ',' .jsx '],},},Auf diese Weise werden bei Verpackungen an allen Stellen, an denen erforderlich ('React-Native') durch das React-Web-Paket ersetzt werden, und das Modul von React-Webs.
Darüber hinaus kann eine weitere Einführungsmethode mit dem Plug-In implementiert werden, siehe unten.
Führen Sie Komponenten durch die Eilemethode ein, um die Leistung zu verbessern
Webpack- und andere Verpackungstools, die CommonJS -Spezifikationen unterstützen, verpacken alle in der Datei forderten Komponenten zusammen. Für React Native ist die Größe des Codes irrelevant, aber für mobiles Web ist es etwas wichtiger. Insbesondere wenn Ihr Projekt nur Textkomponenten benötigt, aber es ist traurig, da erforderlich ist ('React-Web'), führt dazu, dass alle Komponenten in ein Packen sind.
Basierend auf dem Webpack -Plugin gibt es eine andere Möglichkeit, Komponenten einzuführen, um dieses Problem zu lösen. Sie können es den Eile nennen. Diese Methode erfordert das Laden des Webpack-Plugins Eile-Resolver-Webpack-Plugin. Die Standard -Webpack -Konfiguration wurde für Sie geladen. Sie können es direkt in der Komponente wie folgt verwenden:
var text = require ('reactText');Statt was vorher war:
var {text} = require ('react-nativ');Auf diese Weise packt der Erstere, wenn WebPack verpackt ist, nur den Inhalt dieser Komponente, wodurch die Größe verringert und die Leistung verbessert wird. Wie wird das erreicht?
Wenn das WebPack des Plug-in geladen wird, werden zuerst alle Komponenten gescannt und die Informationen von @ProvidesModule im Komponentenheader (z. B. die Informationen der Textkomponente). Wenn der Komponentenname in anderen Dateien erforderlich ist, wird die Datei automatisch für Verpackungen gefunden. Gleichzeitig können Sie auch zwischen Plattformen unterscheiden. Selbst wenn es sich um denselben Namen handelt, wird die Plattform beim Verpacken der entsprechenden Dateien unterscheidet (die Dateien werden gemäß den Namensregeln von index.xxx.js ermittelt).