React Native 24 - 指南:JavaScript运行环境(JavaScript Environment)
JavaScript运行时(JavaScript Runtime)
When using React Native, you’re going to be running your JavaScript code in two environments:
- On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn’t use JIT due to the absence of writable executable memory in iOS apps.
- When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.
React Native中的JavaScript代码运行在两种环境中:
- 在iOS模拟器以及设备、Android模拟器以及设备,React Native运行在JavaScriptCore中——驱动Safari浏览器的JavaScript引擎。由于在iOS的应用程序中中不存在可写内存,所以JSC不能启用JIT。
- 当用Chrome调试的时候,所有的JavaScript代码运行在Chrome内部的V8引擎上,并通过WebSocket将执行结果通信。
While both environments are very similar, you may end up hitting some inconsistencies. We’re likely going to experiment with other JS engines in the future, so it’s best to avoid relying on specifics of any runtime.
这两种执行环境非常相似,但也可能遇到不完全一致的情况。在未来有可能会更换JS引擎,所以最好避免代码依赖于特定的运行环境特性。
JavaScritp语法转换(JavaScript Syntax Transformers)
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
借住语法转换器可以用更舒服的方式编写代码,充分使用JavaScript新的语法特性,而不必等解释器的支持。
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
从0.5.0版本开始,React Native中集成了Babel JavaScript编译器。查看Babel文档以获取更多支持转换的详细信息。
Here’s a full list of React Native’s enabled transformations.
点击查看React Native中启用的语法转换清单。
ES5
- Reserved Words:
promise.catch(function() { });
ES6
- Arrow functions:
<C onPress={() => this.setState({pressed: true})}
- Block scoping:
let greeting = 'hi';
- Call spread:
Math.max(...array);
- Classes:
class C extends React.Component { render() { return <View />; } }
- Constants:
const answer = 42;
- Destructuring:
var {isActive, style} = this.props;
- for…of:
for (var num of [1, 2, 3]) {}
- Modules:
import React, { Component } from 'react';
- Computed Properties:
var key = 'abc'; var obj = {[key]: 10};
- Object Concise Method:
var obj = { method() { return 10; } };
- Object Short Notation:
var name = 'vjeux'; var obj = { name };
- Rest Params:
function(type, ...args) { }
- Template Literals:
var who = 'world'; var str = `Hello ${who}`;
ES7
- Object Spread:
var extended = { ...obj, a: 10 };
- Function Trailing Comma:
function f(a, b, c,) { }
- Async Functions:
async function doStuffAsync() { const foo = await doOtherStuffAsync(); }
;
特殊(Specific)
垫片(Polyfills)
Many standards functions are also available on all the supported JavaScript runtimes.
所有JavaScript运行时中支持的大多数标准方法也是可用的。
Browser
- console.{log, warn, error, info, trace, table}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
- navigator.geolocation
ES6
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
- Array.from
- Array.prototype.{find, findIndex, includes}
ES7
特殊(Specific)
__DEV__