Eine React Native-App besteht aus zwei Seiten, wie unten angegeben.

1. Die JavaScript-Seite
2. Die einheimische Seite

Die native Seite sollte Java oder Kotlin für Android und Swift oder Objective-C für iOS sein.

Der große Grund für die Popularität von React Native ist, dass eine Brücke zwischen dem JavaScript-Code und der nativen Sprache geschlagen werden kann. React Native ist so entwickelt, dass wir eine Brücke zwischen dem JavaScript-Code und der Muttersprache herstellen können. Die Bridge in React Native ermöglicht es dem JavaScript-Code und dem nativen Code, miteinander zu interagieren. Ohne die Brücke in React Native gibt es für den nativen Code absolut keine Möglichkeit, irgendwelche Informationen an den JavaScript-Code zu übertragen und umgekehrt.

Notwendigkeit einer Brücke in React Native: Angenommen, wir müssen einige vorhandene Java-Bibliotheken wiederverwenden, ohne sie erneut in JavaScript zu implementieren. Wir können es also in unserer React Native-Anwendung mit der Verwendung von Native Bridge wiederverwenden. Manchmal müssen wir höchstwahrscheinlich Native Bridge verwenden, um eine Anwendung auf Produktionsebene zu erstellen.

Funktionsweise der Brücke: Wenn wir auf unser App-Symbol klicken, um unsere App zu öffnen, entwirft das Betriebssystem den Hauptthread (auch bekannt als UI-Thread) und weist diesen Thread unserer App zu. Dieser Haupt-Thread erstellt den JavaScript-Thread und den Shadow-Thread (auch als Shadow-Tree bekannt). Die Aufgabe des Shadow-Threads besteht darin, auf der JavaScript-Seite beschriebene Layouts zu berechnen und diese Details auf die native Seite umzuleiten. Ansichten werden in JavaScript abgelegt, im Shadow-Baum berechnet und an den UI-Thread umgeleitet.

Versand von Daten: Jetzt wissen wir, wie Layouts am Anfang beschrieben werden, aber was passiert, nachdem die App gestartet wurde? Was passiert, wenn wir eine Schaltfläche beeinträchtigen müssen? Wird dieses Detail durch die Brücke gesendet?

Um eine Schaltfläche zu beeinträchtigen, können wir auf der JavaScript-Seite eine Funktion festlegen, die wie ein serialisiertes JSON-Objekt über die Brücke umgeleitet wird. Verbesserungen an nativen Ansichten werden gleichzeitig gruppiert und am Ende aller Iterationen der Ereignisschleife über die native Seite umgeleitet.

Zusammen mit dem Übergeben von Eigenschaften können wir eine Funktion übergeben, die JavaScript-Code als Reaktion auf mehrere Ereignisse auf der nativen Seite ausführt (z. B. das Drücken auf die Schaltfläche). Wir notieren diesen Rückruf in JavaScript, das serialisiert und auf die native Seite umgeleitet wird. Wenn wir die Schaltfläche drücken, wird das native Ereignis an die JavaScript-Domäne umgeleitet und der Rückruf wird ausgeführt. Jetzt können wir Ereignisse auch direkt von der nativen Seite auf die JavaScript-Seite umleiten, ohne einen Rückruf zu verwenden. Das Problem ist, dass wir, wenn wir diese Interaktivität auf der nativen Seite beginnen, nicht wissen, wer auf die JavaScript-Seite achtet, was unerwünschte Schritte aktivieren und das Debuggen unseres Codes erschweren kann. Es ist außerdem sinnvoll, Callbacks der JS-Seite zu verwenden, außer es gibt einen bestimmten Grund, dies nicht zu tun.

Ausführung: Meistens geht alles stetig vorbei aber manchmal wie bei einer Originalbrücke bekommt es Staus. Wenn es einen großen Artikelkatalog gibt und wir schnell zu scrollen beginnen, erkennen wir möglicherweise einen leeren Bildschirm, bevor der Rest der Artikel übermittelt wird. Dies geschieht, weil das native onScroll-Ereignis an den JavaScript-Thread umgeleitet wird, der JavaScript-Thread das neue Layoutdetail an den Schattenbaum überträgt, der Schattenbaum das Layout berechnet und auf die native Seite umleitet. Während wir schnell scrollen, sammeln wir diese Ereignisse, die zu einem Stau über der Brücke führen. Wir können versuchen, dem zu entgehen, indem wir Layouts vorberechnen, um die Brücke einige Male zu überqueren. Beim Ausführen komplexer Animationen können ähnliche Ausführungsprobleme auftreten. 

Lassen Sie uns nun eingehend untersuchen und erkennen, wie React Native unter der Haube funktioniert, und dies wird uns helfen, die Kompilierung von JavaScript in einen nativen Code und die Funktionsweise des gesamten Verfahrens zu verstehen. Es ist wichtig zu wissen, wie das gesamte Verfahren funktioniert, damit Sie manchmal bei Leistungsproblemen erkennen, woher dieses Problem stammt.

Informationsfluss: Wie wir über React-Ideen gesprochen haben, die React Native antreiben, und einer davon ist, dass UI eine Funktion von Daten ist. Sie können die Bedingung konvertieren und React merkt, was aktualisiert werden soll. Nehmen wir nun an, wie Details mit der üblichen React-App fließen. Erkunden Sie das folgende Diagramm:

Erläuterung obiges Diagramm:

1. Wir haben einen React-Abschnitt, der Details zu drei untergeordneten Abschnitten weiterleitet.
2. Was anonym passiert, ist, dass ein virtueller DOM-Baum generiert wird, der diese Abschnittshierarchien bildet.
3. Wenn die Bedingung des übergeordneten Abschnitts aktualisiert wird, bemerkt React, wie mit den untergeordneten Details fortgefahren werden soll.
4. Da Kinder in erster Linie eine Darstellung der Benutzeroberfläche sind, erkennt React, wie Browser-DOM-Updates gruppiert werden, und implementiert sie.

Lassen Sie uns nun das Browser-DOM abtrennen und annehmen, dass React Native anstelle der Gruppierung von Browser-DOM-Updates dasselbe im Gegenzug mit Aufrufen von nativen Modulen tut. Das Fortfahren von Details zu nativen Modulen kann also auf zwei Arten erfolgen, die unten angegeben sind:

1. Gemeinsame veränderliche Daten
2. Serialisierbare Nachrichten, die zwischen JavaScript- und nativen Modulen ausgetauscht werden

React Native verwendet die zweite Methode, bei der es sich um serialisierbare Nachrichten handelt, die zwischen JavaScript- und nativen Modulen ausgetauscht werden. Anstatt Daten auf gemeinsam nutzbaren Objekten zu verändern, leitet es asynchron serialisierte gruppierte Nachrichten an die Bridge of React Native weiter. Die Bridge in React Native ist die Schicht, die es dem JavaScript-Code und dem nativen Code ermöglicht, miteinander zu interagieren.

Architektur: Das folgende Diagramm erläutert die Struktur der React Native-Architektur:

Im obigen Diagramm sind drei Schichten angegeben:

1. JavaScript
2. Brücke
3. Einheimisch

Die Bridge in React Native ist die Schicht, die es dem JavaScript und den Native-Modulen ermöglicht, miteinander zu interagieren, und ist in erster Linie eine Trägerschicht, die nicht parallele, chronologisch gruppierte Feedback-Nachrichten von JavaScript an Native-Module leitet. In der obigen Abbildung wird die native Schicht zuletzt angezeigt, da diese Schicht dem Gerät selbst am nächsten ist. 

Wenn ein Vorfall auf der nativen Ebene implementiert wird, kann es sich um einen Timer, eine Berührung oder eine Netzwerkanforderung handeln, in erster Linie um jeden Vorfall, der Geräte mit nativen Modulen verknüpft. Seine Daten werden zusammengestellt und diese Daten werden als serialisierte Nachricht an die React Native Bridge gesendet. Danach leitet die Bridge diese Nachricht an die JavaScript-Schicht weiter.

Die JavaScript-Schicht ist eine Incident-Schleife. Nachdem die React Native Bridge die serialisierte Nutzlast an JavaScript weiterleitet, wird der Vorfall verarbeitet und die Anwendungslogik wird aktiv.

Threading-Modell: Nun, nach all den Dingen, die wir oben besprochen haben, ist es wichtig zu erkennen, dass alle oben besprochenen Dinge in drei Hauptthreads erledigt werden:

1. UI (der Hauptthread der Anwendung)
2. Native Module
3. JavaScript-Laufzeit

Lassen Sie uns über jeden der oben genannten Threads verstehen:

• Die Benutzeroberfläche (der Hauptthread der Anwendung): Es ist der native Thread, in dem die Wahrnehmung auf nativer Ebene stattfindet, und es ist der Ort, an dem unsere Auswahlplattform wie iOS oder Android das Zeichnen, Stylen und Messen durchführt.

• Native Module: Wenn die Anwendung auf native APIs zugreift, erfolgt der Zugriff über einen anderen Thread für native Module. Wenn beispielsweise auf die Kamera, den Standort, die Fotos und andere native APIs zugegriffen wird, werden in der Regel auch Vereinbarungen und Hinweise zu diesem Thread getroffen.

• JavaScript-Laufzeit: Dies ist der Thread, in dem jeder JavaScript-Anwendungscode ausgeführt wird. Schließlich basiert es auf einer JavaScript-Vorfallsschleife und ist daher stabiler als der UI-Thread. Wenn also komplizierte Berechnungen in einer Anwendung durchgeführt werden, die viele UI-Änderungen durchführt, können diese zu einer schlechten Leistung führen.