بيئة JavaScript في React Native

عند استخدام React Native، ستُشغَّل شيفرة JavaScript في بيئتين (JavaScript Runtime):

في معظم الحالات، سيستخدم React Native مُحرّكَ JavaScriptCore، وهو محركُ JavaScript الذي يعتمد عليه متصفح Safari. لاحظ أنه على نظام iOS، لا يستخدم محرّك JavaScriptCore ميّزة JIT نظرًا لعدم وجود ذاكرة قابلة للكتابة والتنفيذ (writable executable memory) في تطبيقات iOS.

عند استخدام منقّح Chrome، تُشغَّل جميع شيفرات JavaScript داخل متصفح Chrome نفسه، والتواصل مع الشيفرة الأصيلة عبر تقنية WebSockets. يستخدم Chrome محرك V8 لتشغيل JavaScript.

في حين أن البيئتين متشابهتان للغاية، قد تحصُل بعض التضاربات (inconsistencies). من المرجّح أن يعتمد مشروع React Native على محركات JavaScript أخرى مستقبلًا، لذا من الأفضل تجنب الاعتماد على ميّزات خاصّة بأي مُحرّك معيّن.

محولات بنية (Syntax Transformers) لغة JavaScript

تجعل محوّلات البنية كتابةَ الشيفرة أمْتعَ وأرْيحَ من خلال السماح لك باستخدام بنية JavaScript الجديدة دون الحاجة إلى انتظار الدعم الكامل لها.

يأتي React Native مع مترجم Babel. انظر توثيق Babel لمزيد من التفاصيل حول التحويلات المدعومة.

إليك قائمة كاملة بالتحويلات المُمَكَّنة في React Native.

التحويل	الشيفرة
ECMAScript 5
الكلمات المحجوزة	promise.catch(function() { });‎
ECMAScript 2015 (ES6)
الدوال السهمية	‎‎<C onPress={() => this.setState({ pressed: true })} />‎‎
نطاق الكتل (Block scoping)	‎‎let greeting = 'hi';‎‎
عامل النشر	Math.max(...array);
الأصناف	class C extends React.Component { render() { return <View />; } }
الخاصيات المحسوبة	‎‎var key = 'abc'; var obj = {[key]: 10};‎‎
الثوابت	‎‎const answer = 42;
التفكيك	var {isActive, style} = this.props;‎‎
`for...of`	for (var num of [1, 2, 3]) {}‎‎
اسم دالة	let number = x => x;
القيم مصنفة النوع (literals)	const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
الوحدات	import React, { Component } from 'react';‎‎
توابع الكائنات الموجزة (Object Concise Method)	var obj = { method() { return 10; } };
الصيغة المختصرة للكائنات (Object Short Notation)	var name = 'vjeux'; var 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)	var who = 'world'; var 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 function doStuffAsync() { const foo = await doOtherStuffAsync(); };
الفاصلة الإضافية في الدوال	function f(a, b, c,) { }
ECMAScript 2019 (ES10)
التقاط الأخطاء try/catch الاختياري (Optional Catch Binding)	try { throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown(); }
ECMAScript 2020 (ES11)
الاستيراد الديناميكي (Dynamic Imports)	const package = await import('package'); package.function()
المرحلة 1 (Stage 1 Proposal)
التصدير الافتراضي (Export Default From)	export v from 'mod';
المرحلة 3 (Stage 3 Proposal)
نشر الكائنات	var extended = { ...obj, a: 10 };
الخاصيات الساكنة static في الأصناف	class CustomDate { static epoch = new CustomDate(0); }
المرحلة 4 (Stage 4 Proposal)
عامل الاستبدال اللاغي (Nullish Coalescing Operator)	const foo = object.foo ?? 'default';
التسلسل الاختياري (Optional Chaining)	const name = obj.user?.name;
مراحل أخرى (Other Proposals)
خاصيات الصنف (Class Properties)	class Bork { static a = 'foo'; static b; x = 'bar'; y; }
أخرى (Miscellaneous)
قالب بابل (Babel Template)	template(`const %%importName%% = require(%%source%%);`);
Flow	function foo(x: ?number): string {}
تحويل ESM إلى CJS	export default 42;
JSX	<View style={{ color: 'red' }} />
الخاصية `assign` في `Object`	Object.assign(a, b);
الخاصية `displayName` في الأصناف المنشأة عبر React	const bar = createReactClass({});
TypeScript	function foo(x: { hello: true, target: 'react native!' }): string {};