跳到主要内容

JavaScript 环境

JavaScript 运行时环境

在使用 React Native 时,你的 JavaScript 代码可能会运行在三个不同的环境上:

  • 从 React Native 0.70 版本开始,React Native 会默认使用Hermes引擎,它是专门为 React Native 而优化的一个新式开源 JavaScript 引擎。
  • 如果 Hermes 被禁用或是较早的 React Native 版本,则会使用JavaScriptCore,也就是 Safari 所使用的 JavaScript 引擎。但是在 iOS 上 JavaScriptCore 并没有使用即时编译技术(JIT),因为在 iOS 中应用无权拥有可写可执行的内存页(因此无法动态生成代码)。
  • 在使用 Chrome 调试时,所有的 JavaScript 代码都运行在 Chrome 中,并且通过 WebSocket 与原生代码通信。此时的运行环境是V8 引擎。(社区也有提供可以在生产环境中使用的react-native-v8)

虽然这些环境非常类似,但开发者还是可能碰到一些不一致的地方。未来我们很可能会尝试一些其他的 JS 引擎,所以请尽量避免使用依赖于特定运行环境的代码。

常见的不一致比如有:iOS 上有部分日期构造函数未实现;Android 上重复定义的 props 可能会导致报错。

JavaScript 语法转换器

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

React Native 内置了Babel 转换器。你可以查看Babel 的文档来了解有关它可以转换的语法的详情。

metro-react-native-babel-preset中可以看到目前 React Native 默认开启的语法转换特性。注:若想学习相关语法,译者推荐阮一峰老师的《ECMAScript 6 入门》

TransformationCode
ECMAScript 5
Reserved Words
promise.catch(function(){...});
ECMAScript 2015 (ES6)
Arrow functions
<ConPress={()=>this.setState({pressed:true})}/>
Block scoping
let greeting ='hi';
Call spread
Math.max(...array);
Classes
classCextendsReact.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
letnumber= x => x;
Literals
const b =0b11;const o =0o7;const u ='Hello\u{000A}\u{0009}!';
Modules
importReact,{Component}from'react';
Object Concise Method
const obj ={method(){return10;}};
Object Short Notation
const name ='vjeux';const obj ={name};
Parameters
functiontest(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
conststring='foo💩bar';const match =string.match(/foo(.)bar/u);
ECMAScript 2016 (ES7)
Exponentiation Operator
let x =10**2;
ECMAScript 2017 (ES8)
Async Functions
asyncfunctiondoStuffAsync(){const foo =awaitdoOtherStuffAsync();};
Function Trailing Comma
functionf(a, b, c,){};
ECMAScript 2018 (ES9)
Object Spread
const extended ={...obj, a:10};
ECMAScript 2019 (ES10)
Optional Catch Binding
try{throw0;}catch{doSomethingWhichDoesNotCareAboutTheValueThrown();}
ECMAScript 2020 (ES11)
Dynamic Imports
constpackage=awaitimport('package');package.function()
Nullish Coalescing Operator
const foo = object.foo??'default';
Optional Chaining
const name = obj.user?.name;
ECMAScript 2022 (ES13)
Class Fields
classBork{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
functionfoo(x:?number):string{};
ESM to CJS
exportdefault42;
JSX
<Viewstyle={{color:'red'}}/>
Object Assign
Object.assign(a, b);
React Display Name
const bar =createReactClass({});
TypeScript
functionfoo(x:{hello:true, target:'react native!'}):string{};

接口兼容(Polyfills)

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

浏览器

ECMAScript 2015 (ES6)

ECMAScript 2016 (ES7)

ECMAScript 2017 (ES8)

专有特性

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

AltStyle によって変換されたページ (->オリジナル) /