JavaScript 环境

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

JavaScript 运行时

使用 React Native 时，您的 JavaScript 代码可能运行在三种环境中：

• 多数情况下，React Native 会使用专为 React Native 优化的开源引擎 Hermes。

• 若禁用 Hermes，React Native 将使用 Safari 的 JavaScript 引擎 JavaScriptCore。请注意在 iOS 上，由于应用缺少可写可执行内存，JavaScriptCore 无法使用 JIT 编译。

• 使用 Chrome 调试时，所有 JavaScript 代码都在 Chrome 内部运行，通过 WebSocket 与原生代码通信。Chrome 使用 V8 作为其 JavaScript 引擎。

尽管这些环境非常相似，但您仍可能遇到不一致的情况。建议避免依赖任何运行时的具体实现细节。

JavaScript 语法转换器

语法转换器让编码更愉悦：您可以使用新的 JavaScript 语法，而无需等待所有解释器支持。

React Native 内置了 Babel JavaScript 编译器。有关支持的转换详情，请查阅 Babel 文档。

完整的转换列表可在 @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__