美文网首页
[翻译][React Native]JavaScript 环境

[翻译][React Native]JavaScript 环境

作者: 18478528c1e4 | 来源:发表于2016-10-14 11:46 被阅读0次

原文

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__`

相关文章

网友评论

      本文标题:[翻译][React Native]JavaScript 环境

      本文链接:https://www.haomeiwen.com/subject/smugyttx.html