بيئة 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 {};
|
شيفرات تعويض نقص الدعم Polyfill
تتوفر العديد من الدوال القياسية كذلك في جميع محرّكات JavaScript المدعومة.
المتصفح
-
console.{log, warn, error, info, trace, table, group, groupEnd} -
require الخاصة بمُحمِّل الوحدات CommonJS -
XMLHttpRequest, fetch -
{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
ES6
-
Object.assign -
String.prototype.{startsWith, endsWith, repeat, includes} -
Array.from -
Array.prototype.{find, findIndex}
ES7
ES8
خاصّة (Specific)
-
__DEV__