Wie React Native App-Layouts erstellt (und wie Fabric sie ändern wird)

Das React Native-Team hat an etwas gearbeitet, das die Funktionsweise der Interna der React Native-Kommunikation mit dem Host-Betriebssystem grundlegend verändern wird. Es trägt den schönen Codenamen „Projektstruktur“ (bis ein offizieller Name veröffentlicht wird).

Lassen Sie uns diskutieren, was es tatsächlich ist und welche Änderungen es für Sie als Entwickler mit sich bringt.

Wie React Native jetzt funktioniert

Wenn wir einen Blick darauf werfen, verwendet React Native derzeit 3 ​​Threads:

  1. UI-Thread - Dies ist der Hauptanwendungsthread, auf dem Ihre Android / iOS-App ausgeführt wird. Es hat Zugriff auf die Benutzeroberfläche und Ihre Benutzeroberfläche kann nur von diesem Thread geändert werden.
  2. Schatten-Thread - Dieser Thread ist der Hintergrund-Thread, mit dem React Native Ihr mit der React-Bibliothek erstelltes Layout berechnet.
  3. JavaScript-Thread - Dieser Thread ist der Ort, an dem Ihr JavaScript-Code (im Wesentlichen Ihr React-Code) lebt und ausgeführt wird.

Das Innenleben…

Fangen wir von vorne an. Angenommen, Sie möchten ein rotes Kästchen in der Mitte Ihres Bildschirms zeichnen. Was also passiert, ist, dass Ihr JS-Thread Code zum Erstellen eines Layouts enthält, dh das rote Kästchen auf dem Bildschirm. Hier ist ein typisches Code-Snippet, das dies für React Native (RN) erreichen könnte:

Das Host-Betriebssystem verfügt über eine eigene Layout-Implementierung und folgt nicht dem soeben geschriebenen Flexbox-Code. Daher muss RN zunächst Ihr Flexbox-codiertes Layout in ein Layoutsystem konvertieren, das Ihr Host-Betriebssystem verstehen kann.

Warten Sie mal! Zuvor müssen wir diesen Layoutberechnungsteil in einen anderen Thread verlagern, damit wir unseren JavaScript-Thread weiter ausführen können. Daher verwendet RN den Schatten-Thread, der im Wesentlichen einen Baum Ihres Layouts erstellt, den Sie in Ihrem JS-Thread codiert haben. In diesem Thread verwendet RN eine Layout-Engine namens Yoga, die das Flexbox-basierte Layout in ein Layout-System konvertiert, das Ihr nativer Host verstehen kann.

React Native verwendet eine sogenannte React Native-Brücke, um diese Informationen vom JS-Thread an den Shadow-Thread zu übertragen. Kurz gesagt, dies serialisiert einfach die Daten im JSON-Format und überträgt sie als Zeichenfolge über die Brücke.

Zu diesem Zeitpunkt befinden wir uns im Schatten-Thread. Der JS-Thread wird ausgeführt und es wird nichts auf dem Bildschirm gezeichnet.

Sobald wir das gerenderte Markup aus Yoga haben, werden diese Informationen erneut über die React Native-Brücke an den UI-Thread übertragen. Dies führt wiederum eine Serialisierung des Shadow-Threads und eine Deserialisierung des Haupt-Threads durch. Hier rendert der Hauptthread dann die Benutzeroberfläche.

Probleme mit diesem Ansatz

Wenn Sie sehen, erfolgt die gesamte Kommunikation zwischen Threads über eine Brücke, die funktioniert, aber voller Einschränkungen ist. Diese beinhalten:

  • Es ist langsam, große Datenblöcke zu übertragen (z. B. eine in eine base64-Zeichenfolge konvertierte Bilddatei)
  • Es ist unnötiges Kopieren von Daten erforderlich, wenn dieselbe Aufgabe nur durch Zeigen auf die Daten im Speicher implementiert werden kann (z. B. ein Bild).

Als nächstes ist die gesamte Kommunikation asynchron, was in den meisten Fällen gut ist. Derzeit gibt es jedoch keine Möglichkeit, den UI-Thread synchron vom JS-Thread zu aktualisieren. Dies führt zu einem Problem, wenn Sie beispielsweise FlatList mit einer großen Datenliste verwenden. (Sie können sich FlatList als eine schwächere Implementierung von RecyclerView vorstellen.)

Aufgrund dieser asynchronen Art der Kommunikation zwischen dem JS-Thread und dem UI-Thread können native Module, die ausschließlich einen synchronen Datenzugriff erfordern, nicht vollständig verwendet werden. Beispielsweise erfordert der RecyclerView-Adapter für Android einen synchronen Zugriff auf die Daten, die gerendert werden, damit kein Flimmern auf dem Bildschirm angezeigt wird. Dies ist derzeit aufgrund der von React Native eingerichteten Multithread-Architektur nicht möglich.

Stoff vorstellen

Machen Sie einen Schritt zurück und denken Sie an Ihren Browser. Wenn Sie genauer hinschauen, sind die Eingabefelder, die Schaltflächen usw. tatsächlich betriebssystemspezifisch. Daher ist es Ihr Browser, der Ihr Betriebssystem (Windows, Mac, Linux oder so ziemlich alles andere) auffordert, beispielsweise irgendwo auf einer Webseite ein Eingabefeld zu zeichnen. Heiliger Moly! Sehen Sie sich die schöne Zuordnung von Browsern zu React Native an.

  • UI-Thread → UI-Thread
  • Browser-Rendering-Engine → Reagiere auf native Rendering-Engine (Yoga / Shadow-Thread)
  • JavaScript-Thread → JavaScript-Thread

Wir wissen, dass moderne Browser sehr ausgereift sind und all diese Aufgaben effizient erledigen. Warum also nicht Native reagieren? Was ist das fehlende Puzzleteil, das React Native brutal einschränkt, aber keine Browser?

Native API-Aufrufe direkt in JavaScript verfügbar machen

Haben Sie jemals Befehle wie document.getElementByIdund Befehle wie setTimeoutund setIntervalin Ihre Konsole geschrieben und die Ausgabe gesehen? Oh! Ihre Umsetzung ist eigentlich [native code]! Was bedeutet das?

Sie sehen, wenn Sie diese Funktionen ausführen, rufen sie keinen JavaScript-Code auf. Stattdessen sind diese Funktionen direkt mit dem aufgerufenen nativen C ++ - Code verknüpft. Der Browser lässt JS also nicht über Bridging mit dem Host-Betriebssystem kommunizieren, sondern macht JS direkt mit nativem Code für das Betriebssystem verfügbar! Kurz gesagt, dies würde React Native Fabric tun: Entfernen Sie die Brücke und lassen Sie die Benutzeroberfläche mithilfe von nativem Code direkt vom JS-Thread aus steuern.

Imbissbuden

  1. Mit RN Fabric kann der UI-Thread (wo die UI gezeichnet wird) mit dem JS-Thread (wo die UI programmiert ist) synchronisiert werden.
  2. Fabric befindet sich noch in der Entwicklung und das React Native-Team hat noch keinen Veröffentlichungstermin angegeben. Aber ich bin mir ziemlich sicher, dass wir dieses Jahr etwas Großartiges sehen werden.
  3. Frameworks für die App-Entwicklung wie diese (RN, NativeScript, Flutter) werden von Tag zu Tag besser!

Bildquellen: //www.slideshare.net/axemclion/react-native-fabric-review20180725

TL; DR

Hat Ihnen dieser Artikel gefallen?

Wenn Ihnen dieser Artikel gefallen hat, können Sie mir gerne ein paar Klatschen geben und sich auf Twitter mit mir in Verbindung setzen. Sie kennen das Beste? Claps und Twitter sind beide kostenlos! Wenn Sie Fragen haben, können Sie diese gerne in den Kommentaren hinterlassen!

Schneller schamloser Plug: Wenn Sie mit React Native beginnen, finden Sie hier meinen 95% Rabatt-Kurs für den Einstieg: React Native - Die ersten Schritte