by Khoa Pham

通过Khoa Pham

了解React Native中的不同JavaScript环境 (Get to know different JavaScript environments in React Native)

React Native can be very easy to get started with, and then at some point problems occur and we need to dive deep into it.

React Native可能很容易上手，然后在某些时候出现问题，我们需要深入研究它。

The other day we had a strange bug that was only occurring in production build, and in iOS only. A long backtrace in the app revealed that it was due to Date constructor failure.

前几天，我们遇到了一个奇怪的错误，该错误仅在生产版本中发生，并且仅在iOS中发生。应用程序中的长时间回溯显示这是由于Date构造函数故障引起的。

const date = new Date("2019-01-18 12:00:00")

This returns the correct Date object in debug mode, but yields Invalid Date in release. What’s special about Date constructor? Here I’m using react native 0.57.5 and no Date libraries.

这会在调试模式下返回正确的Date对象，但在发行版中会产生Invalid Date 。 Date构造函数有何特别之处？在这里，我使用的是react native 0.57.5，并且没有Date库。

日期构造器 (Date constructor)

The best resource for learning Javascript is via Mozilla web docs, and entering Date:

学习Javascript的最佳资源是通过Mozilla Web文档，然后输入Date ：

Creates a JavaScript Date instance that represents a single moment in time. Date objects use a Unix Time Stamp, an integer value that is the number of milliseconds since 1 January 1970 UTC.
创建一个表示单个时刻JavaScript Date实例。 Date对象使用Unix时间戳记，它是一个整数值，它是自1970年1月1日UTC以来的毫秒数。

Pay attention to how Date can be constructed by dateString:

注意如何用dateString构造Date：

dateStringString value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).
dateString表示日期的字符串值。该字符串应采用Date.parse()方法可识别的格式( 符合IETF的RFC 2822时间戳以及ISO8601的版本 )。

So Date constructor uses static method Date.parse under the hood. This has very specific requirement about the format of date string that it supports

所以Date构造Date.parse在Date.parse使用静态方法Date.parse 。这对它支持的日期字符串的格式有非常具体的要求

The standard string representation of a date time string is a simplification of the ISO 8601 calendar date extended format (see Date Time String Format section in the ECMAScript specification for more details). For example, "2011-10-10" (date-only form), "2011-10-10T14:48:00" (date-time form), or "2011-10-10T14:48:00.000+09:00" (date-time form with milliseconds and time zone) can be passed and will be parsed. When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.
日期时间字符串的标准字符串表示形式是ISO 8601日历日期扩展格式的简化形式(有关更多详细信息，请参见ECMAScript规范中的“ 日期时间字符串格式”部分)。例如， "2011-10-10" (仅日期格式)， "2011-10-10T14:48:00" (日期时间格式)或"2011-10-10T14:48:00.000+09:00" (具有毫秒和时区的日期时间格式)可以传递并进行解析。缺少时区偏移时，仅日期格式将解释为UTC时间，而日期时间格式将解释为本地时间。

The ECMAScript specification states: If the String does not conform to the standard format the function may fall back to any implementation–specific heuristics or implementation–specific parsing algorithm. Unrecognizable strings or dates containing illegal element values in ISO formatted strings shall cause Date.parse() to return NaN.
ECMAScript规范指出：如果String不符合标准格式，则该函数可能会退回到任何特定于实现的试探法或特定于实现的解析算法。 ISO格式的字符串中无法识别的字符串或包含非法元素值的日期将导致Date.parse()返回NaN 。

The reason that we get Invalid Date in iOS must be because the code was run in two different JavaScript environments and they somehow have different implementation of the Date parsing function.

我们在iOS中获得无效日期的原因一定是因为代码是在两个不同JavaScript环境中运行的，并且它们在某种程度上对日期解析功能具有不同的实现。

JavaScript环境 (JavaScript Environment)

React Native guide has a dedicated section about JavaScript environments.

React Native指南专门介绍了JavaScript环境。

When using React Native, you’re going to be running your JavaScript code in two environments:

使用React Native时，您将在两种环境中运行JavaScript代码：

In most cases, React Native will use JavaScriptCore, the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
在大多数情况下，React Native将使用JavaScriptCore (支持SafariJavaScript引擎)。请注意，在iOS上，由于iOS应用程序中没有可写的可执行内存，因此JavaScriptCore不使用JIT。
When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses V8 as its JavaScript engine.
使用Chrome调试时，所有JavaScript代码都在Chrome本身中运行，并通过WebSockets与本机代码进行通信。 Chrome使用V8作为其JavaScript引擎。

While both environments are very similar, you may end up hitting some inconsistencies. We’re likely going to experiment with other JavaScript engines in the future, so it’s best to avoid relying on specifics of any runtime.

尽管两种环境非常相似，但您最终可能会遇到一些不一致之处。将来我们可能会尝试使用其他JavaScript引擎，因此最好避免依赖任何运行时的细节。

React Native also uses Babel and some polyfills to have some nice syntax transformers, so some of the code that we write may not be necessarily supported natively by JavascriptCore.

React Native还使用Babel和某些polyfill来具有一些不错的语法转换器，因此JavascriptCore不一定必须支持我们编写的某些代码。

Now it is clear that while we debug our app via Chrome debugger, it works because V8 engine handles that. Now try turning off Remote JS Debugging: we can see that the above Date constructor fails, which means it is using JavascriptCore.

现在很明显，当我们通过Chrome调试器调试应用程序时，它可以工作，因为V8引擎可以处理它。现在尝试关闭远程JS调试：我们可以看到上面的Date构造函数失败，这意味着它正在使用JavascriptCore 。

To confirm this issue, let’s run our app in Xcode and go to the Safari app on MacOS to enter Development menu. Select the active Simulator and choose JSContext on the current iOS app. Remember to turn off Remote JS Debugging so that the app uses JavascriptCore:

为确认此问题，让我们在Xcode中运行我们的应用程序，然后转到MacOS上的Safari应用程序以进入“开发”菜单。选择活动的Simulator，然后在当前iOS应用上选择JSContext。请记住关闭远程JS调试，以便该应用程序使用JavascriptCore：

Now open the Console in Safari dev tools, and we should have access to JavascriptCore inside our app. Try running the above Date constructor to confirm that it fails:

现在，在Safari开发工具中打开控制台，我们应该可以在应用程序内访问JavascriptCore。尝试运行上面的Date构造函数以确认它失败：

有效日期字符串格式是什么？ (What are legit date string formats?)

Since 2016, JavascriptCore supports most ES6 features:

自2016年以来， JavascriptCore支持大多数ES6功能：

As of r202125, JavaScriptCore supports all of the new features in the ECMAScript 6 (ES6) language specification
从r202125开始，JavaScriptCore支持ECMAScript 6(ES6)语言规范中的所有新功能。

And it was fully confirmed a year later in JSC ? ES6

一年后，它在JSC中得到了充分证实？ ES6

ES2015 (also known as ES6), the version of the JavaScript specification ratified in 2015, is a huge improvement to the language’s expressive power thanks to features like classes, for-of, destructuring, spread, tail calls, and much more
ES2015 (也称为ES6)，在2015年批准了JavaScript规范的版本，是一个巨大的进步了语言的表达能力归功于像功能类，换的，解构，传播，尾调用和更

WebKit’s JavaScript implementation, called JSC (JavaScriptCore), implements all of ES6
WebKitJavaScript实现(称为JSC(JavaScriptCore)) 实现了所有ES6

For more details about JavaScript features supported by different JavaScript engines, visit this ECMAScript comparison table.

有关不同JavaScript引擎支持JavaScript功能的更多详细信息，请访问此ECMAScript比较表。

Now for the date string format, from Date.parse, let’s visit ECMAScript 2015 specification to see what it says about date string format:

现在，从Date.parse中获取日期字符串格式，让我们访问ECMAScript 2015规范，以了解日期字符串格式的含义：

ECMAScript defines a string interchange format for date-times based upon a simplification of the ISO 8601 Extended Format. The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ

ECMAScript基于ISO 8601扩展格式的简化，为日期时间定义了字符串交换格式。格式如下： YYYY-MM-DDTHH:mm:ss.sss Z

Where the fields are as follows:

字段如下：

"T" appears literally in the string, to indicate the beginning of the time element.

"T"字面上出现在字符串中，以指示时间元素的开始。

So JavascriptCore requires T specifier and V8 can work without it. The fix for now is to always include that T specifier. This way we always follow ECMAScript standards to make sure it works across different JavaScript environments.

因此， JavascriptCore需要T说明符，而V8可以不使用它。现在的解决方法是始终包含该T指定符。这样，我们始终遵循ECMAScript标准，以确保其可在不同JavaScript环境中正常工作。

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

And now it returns correct Date object. There may be difference between JavascriptCore on iOS and macOS, and among different iOS versions. The lesson learned here is that we should always test our app thoroughly in production and on devices to make sure it works as expected.

现在，它返回正确的Date对象。 iOS和macOS上的JavascriptCore之间以及不同的iOS版本之间可能存在差异。从这里吸取的教训是，我们应该始终在生产环境和设备上全面测试我们的应用程序，以确保其能够按预期运行。