Środowisko JavaScript

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Runtime JavaScript

Podczas korzystania z React Native, Twój kod JavaScript może działać w aż trzech różnych środowiskach:

• W większości przypadków React Native używa Hermesa, otwartoźródłowego silnika JavaScript zoptymalizowanego pod React Native.

• Jeśli Hermes jest wyłączony, React Native wykorzysta JavaScriptCore, silnik napędzający Safari. Na iOS JavaScriptCore nie używa JIT z powodu braku pamięci wykonywalnej z możliwością zapisu w aplikacjach.

• Podczas debugowania w Chrome cały kod JavaScript działa w samej przeglądarce, komunikując się z kodem natywnym przez WebSockety. Chrome używa silnika V8.

Choć te środowiska są bardzo podobne, mogą wystąpić pewne niespójności. Najlepiej unikać polegania na specyficznych cechach dowolnego runtime'u.

Transformatory składni JavaScript

Transformatory składni ułatwiają pisanie kodu, pozwalając używać nowych konstrukcji JavaScript bez oczekiwania na ich wsparcie we wszystkich interpreterach.

React Native dostarcza kompilator Babel. Szczegóły obsługiwanych transformacji znajdziesz w dokumentacji Babela.

Pełna lista transformacji włączonych w React Native dostępna jest w @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 {};

Polyfille

Wiele standardowych funkcji jest dostępnych we wszystkich obsługiwanych środowiskach JavaScript.

Przeglądarka

• 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}

Specyficzne

• __DEV__