+1

[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

<C onPress={() => this.setState({pressed: true})} 
let greeting = 'hi'; 
Math.max(...array); 
class C extends React.Component { render() { return <View />; } } 
const answer = 42; 
var {isActive, style} = this.props; 
for (var num of [1, 2, 3]) {} 
import React, { Component } from 'react';
var key = 'abc'; var obj = {[key]: 10};
var obj = { method() { return 10; } };
var name = 'vjeux'; var obj = { name };
function(type, ...args) { }
var who = 'world'; var str = `Hello ${who}`;

ES7

var extended = { ...obj, a: 10 };
function f(a, b, c,) { }
async function doStuffAsync() { const foo = await doOtherStuffAsync(); };

Specific

<View style={{color: 'red'}} />
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

ES6

ES7

Specific

  • __DEV__

Nguồn tham khảo JavaScript Environment


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí