跳到主要内容

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 已启用的转换完整列表可在 @react-native/babel-preset 中找到。

转换代码
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 {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;}
Stage 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 显示名称
const bar = createReactClass({});
TypeScript
function foo(x: {hello: true, target: 'react native!'}): string {};

Polyfills​

许多标准函数在所有受支持的 JavaScript 运行时中也都可用。

浏览器​

ECMAScript 2015 (ES6)​

ECMAScript 2016 (ES7)​

ECMAScript 2017 (ES8)​

特定项​

  • __DEV__