Was ist der Unterschied zwischen React und React Native?

Der Unterschied zwischen React und React Native ist: 1. Die Plattform, auf der das Framework funktioniert, ist unterschiedlich. 3. Der Rendering-Zyklus ist unterschiedlich. 4. Alle Elemente in React Native werden ersetzt die von der Plattform spezifizierten Reaktionskomponenten 5. Host Die APIs der Plattformen sind unterschiedlich.

Die Umgebung dieses Artikels: Windows 10, React16-Version, Dell G3-Computer.

(Lernvideo-Sharing: React-Video-Tutorial)

Die Unterschiede sind wie folgt:

1. Die Plattformen, auf denen das Framework funktioniert, sind unterschiedlich.

RN ist von React abgeleitet, aber RN ist ein JS-Framework zur Entwicklung wirklich nativ gerenderter iOS- und Android-Mobilanwendungen, während React den Browser als Rendering-Plattform verwendet.

2. Der Unterschied im Funktionsprinzip

Virtuelles DOM besteht zwischen der vom Entwickler beschriebenen Ansicht und der tatsächlich auf der Seite gerenderten Ansicht. Wenn Sie eine interaktive Benutzeroberfläche in einem Browser rendern möchten, müssen Entwickler das Dokumentobjektmodell des Browsers bedienen. Die Entstehung von Virtual DOM dient dazu, die durch diesen Teil des Vorgangs verbrauchte Leistung zu sparen.

Aber das große Potenzial von Virtual DOM liegt in dieser Abstraktionsschicht, die viele Möglichkeiten mit sich bringen kann.

Das Arbeitsprinzip von React Native besteht darin, die Objective-C-API zum Rendern von iOS-Komponenten und die Java-API zum Rendern von Android-Komponenten aufzurufen, anstatt sie in DOM zu rendern. Bridging ermöglicht es React, von der Hostplattform geöffnete UI-Komponenten aufzurufen, und die React-Komponente gibt den Markup-Code zurück, der die Schnittstelle über die Render-Methode beschreibt. Wenn es sich um eine Webplattform handelt, analysiert React den Markup-Code schließlich im DOM des Browsers. In React Native wird der Markup-Code in plattformspezifische Komponenten analysiert. Beispielsweise wird 548e7793df275d156d270cdda504ba19 als UIView angezeigt Plattform.

3. Rendering-Zyklus

Der Rendering-Zyklus von React beginnt, nachdem die Reaktionskomponente im DOM bereitgestellt wurde. Anschließend tritt React in den Rendering-Zyklus ein und rendert die Komponente nach Bedarf. In der Rendering-Phase rendert React die vom Entwickler zurückgegebenen HTML-Tags bei Bedarf direkt auf der Seite.

Der React Native-Lebenszyklus ist im Grunde derselbe wie React. Da React Native auf Bridging basiert und nicht im UI-Hauptthread ausgeführt wird, kann es diese asynchronen Aufrufe ausführen, ohne die Benutzererfahrung zu beeinträchtigen.

4. Komponenten erstellen

Beim Schreiben von React für die Webumgebung muss die Ansicht letztendlich in ein gewöhnliches HTML-Element gerendert werden. Alle Elemente werden durch plattformspezifische React-Komponenten ersetzt, z. B. in iOS. < Die ;View>-Komponente wird als UIView und auf der Android-Plattform als View gerendert.

UI-Elemente sind alle React-Komponenten, keine grundlegenden HTML-Elemente wie dc6dce4a544fdca2df29d5ac0ea9906b. Wenn Sie also jede Komponente verwenden, müssen Sie sie explizit importieren, wie zum Beispiel:

import { DatePickerIOS } from 'react-native';

5, nativer Stil

Im Web: React-Stil Komponenten mithilfe von CSS-Stilen ist bereits ein unverzichtbarer Bestandteil des Entwicklungsprozesses. React hat im Allgemeinen keinen Einfluss auf die Art und Weise, wie wir CSS schreiben, und es erleichtert die dynamische Erstellung von Stilen (über Status und Requisiten), aber ansonsten ist es React im Grunde egal, wie wir mit Stilen umgehen.

Es gibt viele Möglichkeiten, Layout und Stile auf Nicht-Web-Plattformen zu verwalten. Wenn wir React Native verwenden, müssen wir nur eine Standardmethode verwenden, um Stile zu verarbeiten. Die Brücke zwischen React und der Host-Plattform enthält eine reduzierte Version Bei der Implementierung von CSS-Teilmengen wird diese CSS-Teilmenge hauptsächlich über Flexbox angelegt, wobei versucht wird, sie so weit wie möglich zu vereinfachen, anstatt alle CSS-Regeln zu implementieren. Im Gegensatz zur Webplattform, wo der Grad der CSS-Unterstützung von Browser zu Browser unterschiedlich ist, erreicht React Native einheitliche Stilregeln.

6. Host-Plattform-API

Der größte Unterschied zwischen React mit der Webumgebung und React Native liegt in der API der Host-Plattform.

Im Web haben wir oft mit Problemen zu kämpfen, die durch die inkonsistente und fragmentierte Übernahme von Standards verursacht werden, und die meisten Browser unterstützen nur einige Kernfunktionen. In React Native spielen jedoch plattformspezifische APIs eine große Rolle bei der Bereitstellung einer großartigen nativen Benutzererfahrung. Natürlich gibt es noch viele weitere Aspekte zu berücksichtigen. Die API deckt viele Funktionen ab, von der Datenspeicherung über Geodienste bis hin zur Steuerung von Hardwaregeräten wie Kameras. APIs auf unkonventionellen Plattformen werden interessanter sein. Wie wird beispielsweise die API zwischen React Native und Virtual-Reality-Headsets aussehen?

Standardmäßig unterstützen die iOS- und Android-Versionen von React Native viele gängige Funktionen und können sogar jede asynchrone native API unterstützen. React Native macht die Verwendung der Host-Plattform-API einfacher und intuitiver, sodass Sie frei experimentieren können. Denken Sie gleichzeitig darüber nach, wie Sie das Erlebnis der Zielplattform anpassen und den Interaktionsprozess in Ihrem Kopf gestalten können. Es erübrigt sich zu erwähnen, dass die Bridge von React Native nicht alle APIs der Host-Plattform verfügbar machen kann.

Wenn Sie eine nicht unterstützte Funktion verwenden müssen, können Sie sie selbst zu React Native hinzufügen. Außerdem wäre es besser, wenn jemand anderes es bereits integriert hätte, daher sollte man sich rechtzeitig mit der Umsetzung in der Community befassen. Es ist erwähnenswert, dass die Verwendung von Plattform-APIs auch bei der Wiederverwendung von Code hilfreich ist. Gleichzeitig sind React-Komponenten, die plattformspezifische Funktionen implementieren, auch plattformspezifisch.

Das Isolieren und Kapseln dieser Komponenten erhöht die Flexibilität Ihrer Anwendung. Dies funktioniert natürlich auch für die Entwicklung von Webanwendungen. Wenn Sie Code zwischen React und React Native teilen möchten, denken Sie bitte daran, dass APIs wie DOM in React Native nicht vorhanden sind.

Verwandte Empfehlungen: JS-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen React und React Native?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!