Ao usar React Native, você executará seu código JavaScript em até três ambientes:
- Na maioria dos casos, o React Native usará o Hermes, um mecanismo JavaScript de código aberto otimizado para o React Native.
- Se o Hermes estiver desativado, o React Native usará JavaScriptCore, o mecanismo JavaScript que alimenta o Safari. Observe que no iOS, JavaScriptCore não usa JIT devido à ausência de memória executável gravável em aplicativos iOS.
- Ao usar a depuração do Chrome, todo o código JavaScript é executado no próprio Chrome, comunicando-se com o código nativo por meio de WebSockets. O Chrome usa V8 como mecanismo JavaScript.
Embora esses ambientes sejam muito semelhantes, você pode acabar encontrando algumas inconsistências. É melhor evitar depender de especificações de qualquer tempo de execução.
Os transformadores de sintaxe tornam a escrita de código mais agradável, permitindo que você use a nova sintaxe JavaScript sem ter que esperar pelo suporte de todos os interpretadores.
O React Native vem com o compilador Babel JavaScript. Verifique a documentação do Babel sobre suas transformações suportadas para obter mais detalhes.
Uma lista completa das transformações habilitadas para React Native pode ser encontrada em @react-native/babel-preset.
| TRANSFORMAÇÃO | CÓDIGO |
| ECMAScript 5 | |
| Palavras reservadas | promise.catch(function() {...}); |
| ECMAScript 2015 (ES6) | |
| Arrow functions |
this.setState({pressed: true})} />
|
| Block scoping |
`let greeting = 'hi';`
|
| Call spread |
`Math.max(...array);`
|
| Classes |
class C extends React.Component {render() { return ; }}
|
| Computed Properties |
const key = 'abc'; const obj = {[key]: 10};
|
| Constants |
const answer = 42;
|
| Destructuring |
const {isActive, style} = this.props;
|
| for…of |
for (var num of [1, 2, 3]) {...};
|
| Function Name |
let number = x => x;
|
| Literals |
const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
|
| Modules |
import React, {Component} from 'react';
|
| Object Concise Method |
const obj = {method() { return 10; }};
|
| Object Short Notation |
const name = 'vjeux'; const obj = {name};
|
| Parameters |
function test(x = 'hello', {a, b}, ...args) {}
|
| Rest Params |
function(type, ...args) {};
|
| Shorthand Properties |
const o = {a, b, c};
|
| Sticky Regex |
const a = /o+/y;
|
| Template Literals |
const who = 'world'; const str = `Hello ${who}`;
|
| Unicode Regex |
const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);
|
| ECMAScript 2016 (ES7) | |
| Exponentiation Operator |
let x = 10 ** 2;
|
| ECMAScript 2017 (ES8) | |
| Async Functions |
async function doStuffAsync() {const foo = await doOtherStuffAsync();};
|
| Function Trailing Comma |
function f(a, b, c,) {};
|
| ECMAScript 2018 (ES9) | |
| Object Spread |
const extended = {...obj, a: 10};
|
| ECMAScript 2019 (ES10) | |
| Optional Catch Binding |
try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}
|
| ECMAScript 2020 (ES11) | |
| Dynamic Imports |
const package = await import('package'); package.function()
|
| Nullish Coalescing Operator |
const foo = object.foo ?? 'default';
|
| Optional Chaining |
const name = obj.user?.name;
|
| ECMAScript 2022 (ES13) | |
| Class Fields |
class Bork {static a = 'foo'; static b; x = 'bar'; y;}
|
| Proposta da etapa 1 | |
| Export Default From |
export v from 'mod';
|
| Diversos | |
| Babel Template |
template(`const %%importName%% = require(%%source%%);`);
|
| Flow |
function foo(x: ?number): string {};
|
| ESM to CJS |
export default 42;
|
| JSX |
|
| Object Assign |
Object.assign(a, b);
|
| React Display Name |
const bar = createReactClass({});
|
| TypeScript |
function foo(x: {hello: true, target: 'react native!'}): string {};
|
Muitas funções padrão também estão disponíveis em todos os tempos de execução JavaScript suportados.
- CommonJS require
console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
Array.from- Array.prototype.{ find, findIndex }
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
- Array.prototype.includes
__DEV__