JavaScript 环境

JavaScript 运行时

在使用 React Native 时，你的 JavaScript 代码最多会运行在三种环境中：

• 在大多数情况下，React Native 会使用 Hermes，这是一个为 React Native 优化的开源 JavaScript 引擎。
• 如果禁用了 Hermes，React Native 会使用 JavaScriptCore，也就是 Safari 所使用的 JavaScript 引擎。请注意，在 iOS 上，JavaScriptCore 不会使用 JIT，因为 iOS 应用中没有可写且可执行的内存。
• 在使用 Chrome 调试时，所有 JavaScript 代码都会运行在 Chrome 本身中，并通过 WebSocket 与原生代码通信。Chrome 使用 V8 作为其 JavaScript 引擎。

虽然这些环境非常相似，但你最终还是可能会遇到一些不一致的情况。最好避免依赖任何特定运行时的细节。

JavaScript 语法转换器

语法转换器可以使编写代码的过程更加享受，因为开发者可以借助转换器直接使用新的 JavaScript 语法标准，而无需等待 JS 解释器的支持。

React Native 内置了 Babel JavaScript 编译器。你可以查看 Babel 文档 了解它所支持的转换的更多细节。

React Native 启用的完整转换列表可以在 @react-native/babel-preset 中找到。

Transformation	Code
ECMAScript 5
Reserved Words	promise.catch(function() {...});
ECMAScript 2015 (ES6)
Arrow functions	<C onPress={() => this.setState({pressed: true})} />
Block scoping	let greeting = 'hi';
Call spread	Math.max(...array);
Classes	class C extends React.Component {render() { return <View />; }}
Computed Properties	const key = 'abc'; const obj = {[key]: 10};
Constants	const answer = 42;
Destructuring	const {isActive, style} = this.props;
for…of	for (var num of [1, 2, 3]) {...};
Function Name	let number = x => x;
Literals	const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
Modules	import React, {Component} from 'react';
Object Concise Method	const obj = {method() { return 10; }};
Object Short Notation	const name = 'vjeux'; const obj = {name};
Parameters	function test(x = 'hello', {a, b}, ...args) {}
Rest Params	function(type, ...args) {};
Shorthand Properties	const o = {a, b, c};
Sticky Regex	const a = /o+/y;
Template Literals	const who = 'world'; const str = `Hello ${who}`;
Unicode Regex	const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);
ECMAScript 2016 (ES7)
Exponentiation Operator	let x = 10 ** 2;
ECMAScript 2017 (ES8)
Async Functions	async function doStuffAsync() {const foo = await doOtherStuffAsync();};
Function Trailing Comma	function f(a, b, c,) {};
ECMAScript 2018 (ES9)
Object Spread	const extended = {...obj, a: 10};
ECMAScript 2019 (ES10)
Optional Catch Binding	try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}
ECMAScript 2020 (ES11)
Dynamic Imports	const package = await import('package'); package.function()
Nullish Coalescing Operator	const foo = object.foo ?? 'default';
Optional Chaining	const name = obj.user?.name;
ECMAScript 2022 (ES13)
Class Fields	class Bork {static a = 'foo'; static b; x = 'bar'; y;}
Stage 1 Proposal
Export Default From	export v from 'mod';
Miscellaneous
Babel Template	template(`const %%importName%% = require(%%source%%);`);
Flow	function foo(x: ?number): string {};
ESM to CJS	export default 42;
JSX	<View style={{color: 'red'}} />
Object Assign	Object.assign(a, b);
React Display Name	const bar = createReactClass({});
TypeScript	function foo(x: {hello: true, target: 'react native!'}): string {};

接口兼容（Polyfills）

许多标准功能也都在支持的 JavaScript 运行环境上做了兼容支持。

浏览器

• CommonJS require
• console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}
• XMLHttpRequest, fetch
• {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame

ECMAScript 2015 (ES6)

• Array.from
• Array.prototype.{find, findIndex}
• Object.assign
• String.prototype.{startsWith, endsWith, repeat, includes}

ECMAScript 2016 (ES7)

• Array.prototype.includes

ECMAScript 2017 (ES8)

• Object.{entries, values}

专有特性

• __DEV__ 用于判断当前是否开发环境的全局变量