JavaScript 环境

JavaScript 运行时

当使用 React Native 时，你将在最多三个环境中运行 JavaScript 代码：

• 在大多数情况下，React Native 将使用 Hermes，这是一个为 React Native 优化的开源 JavaScript 引擎。
• 如果禁用了 Hermes，React Native 将使用 JavaScriptCore，这是为 Safari 提供动力的 JavaScript 引擎。请注意，在 iOS 上，由于 iOS 应用中缺少可写可执行内存，JavaScriptCore 不使用 JIT。
• 当使用 Chrome 调试时，所有 JavaScript 代码都在 Chrome 本身内运行，通过 WebSockets 与原生代码通信。Chrome 使用 V8 作为其 JavaScript 引擎。

虽然这些环境非常相似，但你可能会遇到一些不一致之处。最好不要依赖任何运行时的具体细节。

JavaScript 语法转换器

语法转换器通过允许你使用新的 JavaScript 语法而无需等待所有解释器的支持，使编写代码更加愉快。

React Native 附带了 Babel JavaScript 编译器。查看 Babel 文档 以了解其支持的转换的更多详细信息。

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

转换	代码
ECMAScript 5
保留字	promise.catch(function() {...});
ECMAScript 2015 (ES6)
箭头函数	<C onPress={() => this.setState({pressed: true})} />
块级作用域	let greeting = 'hi';
调用展开	Math.max(...array);
类	class C extends React.Component {render() { return <View />; }}
计算属性	const key = 'abc'; const obj = {[key]: 10};
常量	const answer = 42;
解构	const {isActive, style} = this.props;
for…of	for (var num of [1, 2, 3]) {...};
函数名	let number = x => x;
字面量	const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
模块	import React, {Component} from 'react';
对象简洁方法	const obj = {method() { return 10; }};
对象简写	const name = 'vjeux'; const obj = {name};
参数	function test(x = 'hello', {a, b}, ...args) {}
剩余参数	function(type, ...args) {};
简写属性	const o = {a, b, c};
粘性正则	const a = /o+/y;
模板字面量	const who = 'world'; const str = `Hello ${who}`;
Unicode 正则	const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);
ECMAScript 2016 (ES7)
指数运算符	let x = 10 ** 2;
ECMAScript 2017 (ES8)
异步函数	async function doStuffAsync() {const foo = await doOtherStuffAsync();};
函数尾随逗号	function f(a, b, c,) {};
ECMAScript 2018 (ES9)
对象展开	const extended = {...obj, a: 10};
ECMAScript 2019 (ES10)
可选 catch 绑定	try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}
ECMAScript 2020 (ES11)
动态导入	const package = await import('package'); package.function()
空值合并运算符	const foo = object.foo ?? 'default';
可选链	const name = obj.user?.name;
ECMAScript 2022 (ES13)
类字段	class Bork {static a = 'foo'; static b; x = 'bar'; y;}
阶段 1 提案
默认导出从	export v from 'mod';
杂项
Babel 模板	template(`const %%importName%% = require(%%source%%);`);
Flow	function foo(x: ?number): string {};
ESM 到 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 {};

Polyfill

许多标准函数在所有支持的 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}
• Object.assign
• String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}

ECMAScript 2016 (ES7)

• Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

ECMAScript 2017 (ES8)

• Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}

特定

• __DEV__