Ambiente JavaScript
Tempo de execução JavaScript
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.
Transformadores de sintaxe JavaScript
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() {...}); |
| 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 />; } } |
| 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 | <View style={{color: 'red'}} /> |
| Object Assign | Object.assign(a, b); |
| React Display Name | const bar = createReactClass({}); |
| TypeScript | function foo(x: {hello: true, target: 'react native!'}): string {}; |
Polifills
Muitas funções padrão também estão disponíveis em todos os tempos de execução JavaScript suportados.
Navegador
- CommonJS require
console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
ECMAScript 2015 (ES6)
Array.from- Array.prototype.{ find, findIndex }
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
ECMAScript 2016 (ES7)
- Array.prototype.includes
ECMAScript 2017 (ES8)
Específico
__DEV__