[React Native] JavaScript Environment

JavaScript Runtime

Khi sử dụng React Native, bạn có thể chạy những JavaScript code của bạn trong hai môi trường:

• Trên máy ảo và thiết bị chạy Android và iOS, React Native sử dụng JavaScriptCore trong môi trường JavaScript được phát triển bởi Safari. Trên iOS JSC không sử dung JIT do không có bộ nhớ thực thi được dùng trong ứng dụng iOS.
• Khi sử dung trình Chrome debugging, nó chạy tất cả code JavaScript trong chính bản thân Chrome và kết nối với native code thông qua WebSocket. Thế nên bạn phải sử dụng V8

Trong khi cả hai môi trường là tương tự nhau, bạn có thể tự mình loại bỏ một vài mâu thuẫn. Chung tôi đang mong muốn hướng đến thử nghiệm với một JS engines khác trong tương lai. Thế nên tốt nhất hãy tránh xa việc dựa vào các chi tiết khi runtime. (Đoạn này mình cũng không được thông cho lắm ý họ muốn nói )

JavaScript Syntax Transformers

Bộ chuyển đổi cú pháp làm cho những đoạn code bạn viết thú vị hơn bằng cách cho phép bạn sử dụng cú pháp JavaScript mới mà không cần phải chờ đợi để được hỗ trợ trên tất cả các trình biên dịch.

Giống như là trên version 0.5.0, React Native sử dụng với Babel JavaScript compiler. Xem tài liệu Babel documentation để tham khảo chi tiết hơn về bộ chuyển đổi được hỗ trợ.

Đây là danh sách đầy đủ các Thông tin thay đối đã hoạt động của React Native enabled transformations.

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

• JSX:

<View style={{color: 'red'}} />

• Flow:

function foo(x: ?number): string {}

Polyfills

Nhiều hàm tiêu chuẩn được hỗ trợ trên tất cả các trình JavaScript runtime

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

• Object.{entries, values}

Specific

• __DEV__

Nguồn tham khảo JavaScript Environment