Reagieren Sie auf native neue Architektur

React Native hat die Veröffentlichung der Version 0.76 angekündigt. Mit diesem Update wird die neue Architektur nun standardmäßig aktiviert. Vor Version 0.76 bestand die einzige Möglichkeit, die neue Architektur zu aktivieren, darin, sich dafür zu entscheiden.

Dieser Blog konzentriert sich auf die Neuerungen in der neuen Architektur.

Die neue React Native-Architektur sorgt seit über einem Jahr aus den richtigen Gründen für Schlagzeilen. Diese neue Architektur, auch bekannt als „Bridgeless“. Warum heißt es Bridgeless? Wir werden dies im Blog untersuchen.“

Bevor wir die neue Architektur erkunden, lassen Sie uns kurz die vorherige zusammenfassen.

? Rückblick auf alte Architektur

a. Es gibt zwei Länder – JavaScript und Native.

b. Es gibt 3 Threads:

• JavaScript-Thread (JavaScript): Verantwortlich für den JavaScript-Bundle-Code.
• Main, UI Native Thread: Verantwortlich für die nativen Module.
• Schatten- oder Hintergrund-Thread (Yoga): Verantwortlich für das Layout.

c. Die einzige Möglichkeit, wie JavaScript und nativer Code miteinander kommunizieren können, ist über die Bridge.

d. Jede native Komponente wie Button oder Alert wird in der JavaScript-Ebene in JSON serialisiert und über die Bridge an den nativen Thread gesendet. Im nativen Thread wird dieser JSON dann in eine native (iOS oder Android) Komponente umgewandelt.

z.B. Wenn im nativen Thread ein Ereignis auf einer nativen Komponente auftritt, sendet diese das Ereignis als JSON über die Brücke an den JavaScript-Thread. Diese Kommunikation erfolgt asynchron, sodass die Bridge die Interaktion zwischen JavaScript und nativen Komponenten erleichtern kann.

? Probleme mit alter Architektur

Die Kommunikation zwischen der JavaScript- und der nativen Ebene basiert auf der Brücke, was die größte Einschränkung der alten Architektur darstellt.

1. Leistungsprobleme

2. Ruckelnde oder leere Frames

3. Duplizierung der Knoten

✨ Ziel neuer Architektur

Die neue Architektur konzentriert sich auf die Lösung der Herausforderungen der vorherigen. Seine Ziele sind:

1. Schneller Start ?

2. Gleichzeitiges Rendern ?️

3. Responsive Apps ?‍?

4. Unterstützung auf mehreren Plattformen?

5. Weniger Abstürze ?

6. Bessere Speicherverwaltung ?

7. Synchronisierte Ausführung ?

? Neue Architektur

Die neue Architektur ist eine Neufassung in C, die zwei wesentliche Verbesserungen freigeschaltet hat:

A. Direkte Kommunikation zwischen JavaScript und nativen Ebenen ohne Brücke. Aus diesem Grund wird die neue Architektur allgemein als „brückenlos“ bezeichnet.

B. Unterstützung für mehrere Plattformen (sofern die Plattformen React Native verwenden)

? Die Komponenten von New Architecture:

1. JavaScript-Schnittstelle (JSI)

JSI ist eine JavaScript-Schnittstelle, dies ist die in C geschriebene Ebene. Damit kann jede JS-Engine verwendet werden und dies ermöglicht die plattformübergreifende Unterstützung – nicht nur auf IOS, Android, sondern auch auf Smart-TVs, Smartwatches usw.

JSI ermöglicht es dem JavaScript, einen Verweis auf das native Modul zu halten. Dadurch kann JavaScript direkt mit nativen Modulen kommunizieren und dies ermöglicht die synchrone Kommunikation zwischen JavaScript und nativem Thread

PS: Ihr nativer React-Code wird über Metro gebündelt und an die JSI gesendet.

2. Neue native Module

Neue native Module sind die neuen und verbesserten nativen Module. Dies ist in C geschrieben und ermöglicht den synchronen Zugriff von JS/TS-APIs auf Native. Dies bedeutet, dass eine direkte Kommunikation zwischen Native und dem JavaScript-Thread erfolgt, ohne dass eine Brücke erforderlich ist. C ermöglicht auch das Schreiben eigener nativer Module für die plattformübergreifende gemeinsame Nutzung.

Neue native Module ermöglichen die Verarbeitung von Ereignissen, das Lesen des Layouts und die Planung von Aktualisierungen sowohl asynchron als auch synchron.

Wie wir bereits erfahren haben, behält JSI die Referenz von Objekten in den TurboModulen bei. Dadurch kann JavaScript-Code jedes Modul nur dann laden, wenn es erforderlich ist (dynamisches Laden von Modulen). Dies verbessert die Startzeit der App im Vergleich zur alten Architektur.

3. Codegen

Codegen ist ein Tool zum Erstellen stark typisierter Verträge. Diese Verträge sind für Entwickler hilfreich, da sie ihnen Zeit sparen und die Kommunikation zwischen programmübergreifenden Programmiersprachen erleichtern.

In React Native sind JavaScript und Typescript keine stark typisierten Sprachen, aber C ist eine stark typisierte Sprache. Um die Kommunikation zwischen JavaScript und C zu ermöglichen, generiert Codegen Schnittstellen (Typen). Dies geschah zur Build-Zeit für eine schnelle Ausführung zur Laufzeit.

Aufgrund der Codegen JSI (JavaScript-Schnittstelle) kommunizieren Sie direkt mit Turbo-Modulen ohne Brücke.

4. Neuer Renderer

Der neue Renderer heißt Fabric. Dies ist auch in C geschrieben.
Erinnern Sie sich, dass wir in React Native drei Threads haben? - JavaScript, Main/UI Native und Schatten-/Hintergrund-Thread. In der alten Architektur bestand das Problem darin, dass unser Hauptthread blockiert wurde, was zu Folgendem führte:

1. Leistungsprobleme

2. Leere Frames (fehlende 60 FPS)

3. Außerdem muss die alte Architektur die 2 Kopien von Knoten und DOM beibehalten. Dies führt zu einem Speicherproblem

4. Es gab keine Möglichkeit, die Aufgaben mit niedriger Priorität zu unterbrechen, um dringenden Updates Priorität einzuräumen.

Im Fabric wurde auf diese Probleme geachtet. Mit dem neuen Renderer können wir jetzt den Übergang verwenden, um die Aufgaben mit niedriger Priorität für dringende Aufgaben zu unterbrechen. Dadurch reagiert die App und der native Haupt-/UI-Thread wird nicht entsperrt. Die Ereignisse werden asynchron ausgeführt. Mit dem neuen Renderer-System wird es einen unveränderlichen Baum der Ansichtshierarchie geben.

Unveränderlich bedeutet, dass es nicht veränderbar ist. Vorteile von Immutable:

1. Dies ermöglicht eine Thread-sichere Verarbeitung von Updates.

2. Dies bedeutet auch, dass es mehrere in Bearbeitung befindliche Bäume geben wird, die jeweils eine andere Version der Benutzeroberfläche darstellen.

3. Da es bei verschiedenen Versionen der Benutzeroberfläche mehrere Bäume gibt, können *Updates im Hintergrund gerendert werden, ohne die Benutzeroberfläche *zu blockieren (z. B. bei Übergängen) oder im Hauptthread (als Reaktion). auf Benutzereingaben)

4. Der neue Renderer kann auch Layoutinformationen synchron lesen und über verschiedene Threads hinweg. Dies ermöglicht bei Bedarf Hintergrundberechnungen für Aktualisierungen mit niedriger Priorität und synchrone Lesevorgänge.

? End-to-End-Architektur

? Zusammenfassung

1. Neue Architektur ist standardmäßig ab 0,76 verfügbar

2. Neue Architektur hat Folgendes eingeführt: JavaScript-Schnittstelle (JSI), neue native Module (Turbo-Module), Codegen, neuer Renderer System (Stoff)

3. JSI ist eine JavaScript-Schnittstelle sie basiert auf C und ermöglicht die direkte Kommunikation der JavaScript- und Native-Module ohne die Notwendigkeit von Bridge

4. Neue native Module sind verbesserte aktuelle native Module. In C geschrieben und bietet viele Vorteile: synchrone Kommunikation mit und von JavaScript und nativ ohne Bridge, Lazy Loading.

5. Codegen generiert Typschnittstellen für JavaScript und C, um miteinander zu kommunizieren.

6. Neuer Renderer (Fabric) ist ein neues Renderer-System, das in C geschrieben ist. Dies ermöglicht eine bessere Leistung, indem mehrere Threads aktiviert und Aufgaben mit niedriger Priorität unterbrochen werden.

7. Neue Ereignisschleife, um die native Reaktion näher an DOM zu bringen

8. Gut gelesene GitHub-Ausgabe

Viel Spaß beim Lernen!!

Das obige ist der detaillierte Inhalt vonReagieren Sie auf native neue Architektur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!