• Zuhause
  • Artikel
  • Lernen Sie verschiedene JavaScript-Umgebungen in React Native kennen
Veröffentlicht am 18-02-2019

Lernen Sie verschiedene JavaScript-Umgebungen in React Native kennen

Quelle: Sporttaucher

React Native kann sehr leicht anzufangen sein, und dann treten Probleme auf und wir müssen tief in sie eintauchen.

Neulich hatten wir einen seltsamen Fehler, der nur beim Produktionsaufbau und nur bei iOS auftrat. Eine lange Rückverfolgung in der App ergab, dass dies auf einen Ausfall des Date-Konstruktors zurückzuführen war.

const date = neues Datum ("2019-01-18 12:00:00")

Dies gibt das korrekte Date-Objekt im Debug-Modus zurück, liefert jedoch ein ungültiges Datum in der Version. Was ist das Besondere am Date-Konstruktor? Hier verwende ich reaktives 0.57.5 und keine Date-Bibliotheken.

Datumskonstruktor

Die beste Ressource zum Erlernen von Javascript ist die Verwendung von Mozilla-Webdokumenten.

Erstellt eine JavaScript Date-Instanz, die einen einzelnen Zeitpunkt darstellt. Datumsobjekte verwenden einen Unix-Zeitstempel, einen ganzzahligen Wert, der die Anzahl der Millisekunden seit dem 1. Januar 1970 UTC darstellt.

Achten Sie darauf, wie Date von dateString erstellt werden kann:

dateStringString-Wert, der ein Datum darstellt. Die Zeichenfolge sollte in einem Format vorliegen, das von der Date.parse () -Methode erkannt wird (IETF-kompatible RFC 2822-Zeitstempel und auch eine Version von ISO8601).

Der Date-Konstruktor verwendet also die statische Methode Date.parse unter der Haube. Dies hat sehr spezifische Anforderungen an das Format der unterstützten Datumszeichenfolge

Die standardmäßige Zeichenfolgendarstellung einer Datumszeitzeichenfolge ist eine Vereinfachung des erweiterten Datumsformats nach ISO 8601 (siehe Datumszeitzeichenfolgenformat in der ECMAScript-Spezifikation). Beispielsweise "2011-10-10" (nur Datumsformular), "2011-10-10T14: 48: 00" (Datumszeitformat) oder "2011-10-10T14: 48: 00.000 + 09: 00" "(Datum-Uhrzeit-Format mit Millisekunden und Zeitzone) kann übergeben werden und wird analysiert. Wenn der Zeitzonenversatz nicht vorhanden ist, werden Datumsformulare als UTC-Zeit interpretiert und Datumszeitformulare werden als Ortszeit interpretiert.
Die ECMAScript-Spezifikation besagt: Wenn der String nicht dem Standardformat entspricht, kann die Funktion auf implementierungsspezifische Heuristiken oder implementierungsspezifische Algorithmen zurückgreifen. Nicht erkennbare Zeichenfolgen oder Datumsangaben, die unzulässige Elementwerte in ISO-formatierten Zeichenfolgen enthalten, bewirken, dass Date.parse () NaN zurückgibt.

Der Grund dafür, dass wir unter iOS ein ungültiges Datum erhalten, muss darin begründet sein, dass der Code in zwei verschiedenen JavaScript-Umgebungen ausgeführt wurde und die Implementierung der Date-Parsing-Funktion irgendwie unterschiedlich ist.

JavaScript-Umgebung

React Native Guide enthält einen speziellen Abschnitt über JavaScript-Umgebungen.

Bei der Verwendung von React Native wird der JavaScript-Code in zwei Umgebungen ausgeführt:

  • In den meisten Fällen verwendet React Native JavaScriptCore, die JavaScript-Engine für Safari. Beachten Sie, dass JavaScriptCore unter iOS JIT nicht verwendet, da in iOS-Apps kein beschreibbarer ausführbarer Speicher vorhanden ist.
  • Wenn Sie das Chrome-Debugging verwenden, wird der gesamte JavaScript-Code innerhalb von Chrome ausgeführt und kommuniziert über WebSockets mit nativem Code. Chrome verwendet V8 als JavaScript-Engine.

Obwohl beide Umgebungen sehr ähnlich sind, kann es zu Inkonsistenzen kommen. Wir werden wahrscheinlich in der Zukunft mit anderen JavaScript-Engines experimentieren.

React Native verwendet auch Babel und einige Polyfills, um einige nette Syntaxtransformatoren zu verwenden. Daher wird ein Teil des von uns geschriebenen Codes möglicherweise nicht unbedingt von JavascriptCore nativ unterstützt.

Nun ist es klar, dass, während wir unsere App über den Chrome-Debugger debuggen, dies funktioniert, weil die V8-Engine dies erledigt. Deaktivieren Sie nun Remote JS Debugging: Wir können sehen, dass der obige Date-Konstruktor fehlschlägt, was bedeutet, dass JavascriptCore verwendet wird.

Um dieses Problem zu bestätigen, starten Sie unsere App in Xcode und rufen Sie die Safari-App unter MacOS auf, um das Menü "Entwicklung" aufzurufen. Wählen Sie den aktiven Simulator aus und wählen Sie in der aktuellen iOS-App JSContext aus. Denken Sie daran, Remote JS Debugging zu deaktivieren, damit die App JavascriptCore verwendet:

Öffnen Sie nun die Konsole in Safari-Entwicklertools, und wir sollten in unserer App auf JavascriptCore zugreifen können. Führen Sie den obigen Date-Konstruktor aus, um zu bestätigen, dass er fehlschlägt:

Was sind legitime Datumsformate?

Seit 2016 unterstützt JavascriptCore die meisten ES6-Funktionen:

Ab r202125 unterstützt JavaScriptCore alle neuen Funktionen der Sprachspezifikation ECMAScript 6 (ES6)

Und ein Jahr später wurde dies in JSC ES6 voll bestätigt

ES2015 (auch bekannt als ES6), die 2015 ratifizierte Version der JavaScript-Spezifikation, ist eine enorme Verbesserung der Ausdruckskraft der Sprache dank Funktionen wie Klassen, for-of, Destructuring, Spread, Tail Calls und vielem mehr
Die JavaScript-Implementierung von WebKit, JSC (JavaScriptCore) genannt, implementiert das gesamte ES6

Weitere Informationen zu JavaScript-Funktionen, die von verschiedenen JavaScript-Engines unterstützt werden, finden Sie in dieser ECMAScript-Vergleichstabelle.

Nun zum Datumszeichenfolgenformat aus Date.parse, besuchen Sie die ECMAScript 2015-Spezifikation, um zu erfahren, was sie zum Datumszeichenfolgenformat sagt:

ECMAScript definiert ein String-Austauschformat für Datums- und Uhrzeitangaben, basierend auf einer Vereinfachung des ISO 8601 Extended Format. Das Format ist wie folgt: JJJJ-MM-TTTHH: mm: ss.sssZ

Wo sind die Felder wie folgt:

"T" erscheint wörtlich in der Zeichenfolge, um den Beginn des Zeitelements anzuzeigen.

JavascriptCore benötigt also einen T-Spezifizierer, und V8 kann ohne ihn arbeiten. Der Fix für jetzt ist, diesen T-Bezeichner immer einzuschließen. Auf diese Weise folgen wir immer den ECMAScript-Standards, um sicherzustellen, dass es in verschiedenen JavaScript-Umgebungen funktioniert.

const date = neues Datum ("2019-01-18 12:00:00" .replace ('', 'T'))

Und jetzt gibt es das korrekte Date-Objekt zurück. Es kann Unterschiede zwischen JavascriptCore unter iOS und macOS und zwischen verschiedenen iOS-Versionen geben. Die Lektion, die wir hier gelernt haben, ist, dass wir unsere App immer gründlich in der Produktion und auf Geräten testen sollten, um sicherzustellen, dass sie wie erwartet funktioniert.

Siehe auch

Warum ein README erstellt wurde, ist zu meinem Lieblingsteil der Entwicklung gewordenWir sind was wir tunRedux Free gehenSo erstellen Sie Ihren ersten witzigen Chatbot mit SAP Conversational AI