Entorno JavaScript

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Entorno de ejecución JavaScript

Cuando usas React Native, ejecutarás tu código JavaScript en hasta tres entornos diferentes:

• En la mayoría de los casos, React Native usa Hermes, un motor JavaScript de código abierto optimizado para React Native.

• Si Hermes está deshabilitado, React Native usará JavaScriptCore, el motor JavaScript que impulsa Safari. Ten en cuenta que en iOS, JavaScriptCore no utiliza JIT debido a la ausencia de memoria ejecutable escribible en aplicaciones iOS.

• Al utilizar la depuración con Chrome, todo el código JavaScript se ejecuta dentro del propio Chrome, comunicándose con el código nativo mediante WebSockets. Chrome usa V8 como motor JavaScript.

Aunque estos entornos son muy similares, podrías encontrar algunas inconsistencias. Es mejor evitar depender de características específicas de cualquier entorno de ejecución.

Transformadores de sintaxis JavaScript

Los transformadores de sintaxis hacen que escribir código sea más agradable al permitirte usar nueva sintaxis de JavaScript sin esperar a que todos los intérpretes la admitan.

React Native incluye el compilador JavaScript Babel. Consulta la documentación de Babel sobre transformaciones admitidas para más detalles.

Puedes encontrar la lista completa de transformaciones habilitadas en React Native en @react-native/babel-preset.

Transformation	Code
ECMAScript 5
Reserved Words	promise.catch(function() {...});
ECMAScript 2015 (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 />; }}
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;}
Stage 1 Proposal
Export Default From	export v from 'mod';
Miscellaneous
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 {};

Polyfills

Muchas funciones estándar están disponibles en todos los entornos de ejecución JavaScript admitidos.

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)

• Object.{entries, values}

Específico

• __DEV__