JavaScript运行时
React Native中的JavaScript代码运行在下列两个环境中:
- 在苹果系统、安卓系统中使用JavaScriptCore(Safari的JavaScript引擎)。在苹果系统中,由于内存原因,JSC不使用JIT。
- 在Chrome中使用 V8
两个环境很相似,但也有些不一致。未来可能使用其他JS引擎,所以最好避免写依赖某种运行时的代码。
JavaScript语法变形
有了语法变形,不需要等待解析器支持,就可以使用新的JavaScript语法来写代码了。
自0.5.0版本起,React Native就使用 Babel JavaScript compiler进行变形。关于支持的变形的更多细节,请查看Babel documentation 。
React Native 变形清单。
ES5
- 保留关键字:
promise.catch(function() { });```
var p1 = new Promise(function(resolve, reject) {
throw 'Uh-oh!';
});
p1.catch(function(e) {
console.log(e); // "Uh-oh!"}
);
###### ES6
* [箭头函数](https://github.com/lukehoban/es6features#arrows):
<C onPress={()=>this.setState({pressed:true})}```
- 块作用域:
let greeting = 'hi';```
* [扩展运算符](https://github.com/lukehoban/es6features#default--rest--spread):
Math.max(...array);```
- 类:
class C extends React.Component {
render() {
return <View />;
}
}```
* [常量](https://github.com/lukehoban/es6features#let-const):
const answer = 42;```
- 解构:
var {isActive, style} = this.props;```
* [for...of](https://github.com/lukehoban/es6features#iterators--forof):
for (var num of [1, 2, 3]) {}```
- 模块:
import React, { Component } from 'react';```
* [动态属性](https://github.com/lukehoban/es6features#enhanced-object-literals):
var key = 'abc';
var obj = {[key]: 10};```
var obj = { method() { return 10; } };```
* [对象短表示](https://github.com/lukehoban/es6features#enhanced-object-literals):
var name = 'vjeux'; var obj = { name };```
function(type, ...args) { }```
* [模板字符串](https://github.com/lukehoban/es6features#template-strings):
var who = 'world';
var str = Hello ${who}
```;
ES7
var extended = { ...obj, a: 10 };```
* [函数参数尾逗号](https://github.com/jeffmo/es-trailing-function-commas):
function f(a, b, c,) { }```
- 异步函数:
async function doStuffAsync() {
const foo = await doOtherStuffAsync();
};```
###### React Native 语法
* [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html):
<View style={{color: 'red'}} />```
- Flow:
function foo(x: ?number): string {}```
# **兼容**
支持的标准函数
###### 浏览器
* [console.{log, warn, error, info, trace, table}](https://developer.chrome.com/devtools/docs/console-api)
* [CommonJS require](https://nodejs.org/docs/latest/api/modules.html)
* [XMLHttpRequest, fetch](http://facebook.github.io/react-native/docs/network.html#content)
* [{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame](http://facebook.github.io/react-native/docs/timers.html#content)
* [navigator.geolocation](http://facebook.github.io/react-native/docs/geolocation.html#content)
###### ES6
* [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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/repeats), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}
* [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)}
###### ES7
* 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)}
###### React Native 语法
* `__DEV__`