[翻译][React Native]JavaScript 环境

原文

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'}} />```

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__`
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,408评论 2 36
  • React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如...
    零度_不结冰阅读 692评论 0 1
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,200评论 0 0
  • 半夜拿起笔和纸想要写点东西的时候,忽然就想起了我的爷爷。 在我为数不多的记忆中,他是一个特别慈祥的老人,总是微笑着...
    谢勿念阅读 281评论 0 2