Datenübergabe
Architekturbewertung erforderlich: Diese Dokumentation wurde zur Unterstützung der Entwicklung gegen die "alte" oder "Legacy"-Architektur von React Native geschrieben. Sie ist möglicherweise nicht direkt auf die Entwicklung mit der neuen Architektur anwendbar und muss überprüft und möglicherweise aktualisiert werden. Informationen zu React Native-Architekturen in React Native Windows finden Sie unter Neu vs. Alt Architektur.
Die neuesten Informationen zur nativen Entwicklung unter Windows finden Sie unter Native Plattform: Übersicht.
Diese Dokumentation und der zugrunde liegende Plattformcode sind im Entstehen begriffen.
Übersicht
React Native-Anwendungen bestehen aus mehreren Komponenten und Ebenen, von denen einige Grenzen haben, die eine Datenübertragung erfordern. Dieses Dokument soll behandeln, wie diese Datenübertragung in React Native Windows erfolgt.
Hier ist das Layout einer minimalen React Native Windows UWP-Anwendung
Die erste Grenze ist vielleicht die offensichtlichste – die Grenze zwischen der JavaScript-VM (in diesem Fall Chakra), die den gebündelten JS-Code der laufenden Anwendung hostet, und dem nativen Code von React Native Windows. Über diese Grenze werden JS-Objekte als folly::dynamic-Objekte in den nativen Code überführt und umgekehrt.
Dies alles geschieht innerhalb von Microsoft.ReactNative, der kompilierten Bibliothek des React Native Windows-Codes. Innerhalb der Bibliothek sind die C++ folly::dynamic-Objekte der primäre Mechanismus für die Arbeit mit JS-Daten.
Nun, hier ist das Layout einer React Native Windows UWP-Anwendung, die ein externes Native Modul verwendet
Mit externen nativen Modulen meinen wir sowohl diejenigen, die in eigenständigen Windows Runtime Component-Bibliotheken definiert sind, als auch diejenigen, die in der Host-UWP-Anwendung definiert sind.
Da wir uns mit einer UWP-Anwendung befassen und externe native Module unterstützen müssen, die sowohl in C# als auch in C++/WinRT geschrieben sind, ist die Bibliothek Microsoft.ReactNative eine Windows Runtime Component. Das bedeutet eine WinRT-ABI-Oberfläche, und als solche interagieren externe native Module mit React Native Windows über eine WinRT-Grenze.
Es wurde viel Arbeit in das Design einer ABI-Oberfläche gesteckt, die so schnell und zukunftssicher wie möglich ist, insbesondere im Hinblick auf die Übertragung von JS-Daten.
Nachdem die JS-Objekte intern in folly::dynamic-Objekte überführt wurden, müssen wir diese Objekte weiter über die WinRT-ABI-Grenze übertragen. Wir tun dies seriell über die Hochleistungs-Interfaces IJSValueReader und IJSValueWriter. Diese Interfaces ermöglichen es uns, Daten über die WinRT-Grenze zu (de-)serialisieren, ohne Heap-Allokationen und auf eine schnelle, minimale und zukunftssichere Weise.
Während Sie die Interfaces IJSValueReader und IJSValueWriter manuell verwenden können, stellen wir auch zwei gemeinsame Projekte bereit, Microsoft.ReactNative.SharedManaged für C# und Microsoft.ReactNative.Cxx für C++/WinRT, die eine robuste Infrastruktur für die automatische Übertragung sowohl einfacher als auch komplexer statischer nativer Typen bieten.
Der End-to-End-Datenfluss sieht ungefähr so aus
Beispiele
Beispiele für die Verwendung von Daten, die automatisch in statische und dynamische native Typen übertragen werden, finden Sie im Modul DataMarshalingExamples im Native Module Sample in microsoft/react-native-windows-samples. Implementierungen für C# und C++/WinRT sind vorhanden.
Weitere Beispiele für die Verwendung des dynamischen Typs JSValue finden Sie unter Verwendung von JSValue.
Beispiele für die manuelle Übertragung von Daten mit IJSValueReader und IJSValueWriter finden Sie unter Native Module (Erweitert).