ReactNative/javascript environment

برنامج وقت التشغيل (JavaScript Runtime)

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

• في معظم الحالات، سيستخدم 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.

ES5

الكلمات المحجوزة: ‎‎promise.catch(function() { });‎‎

ES6

• الدوال السهمية: ‎‎<C onPress={() => this.setState({pressed: true})}‎‎
• نطاق الكتل (Block scoping): ‎‎let greeting = 'hi';‎‎
• النشر: ‎‎Math.max(...array);‎‎
• الأصناف: ‎‎class C extends React.Component { render() { return <View />; } }‎‎
• الثوابت: ‎‎const answer = 42;‎‎
• التفكيك: ‎‎var {isActive, style} = this.props;‎‎
• ‎‎for...of‎‎: مثل for (var num of [1, 2, 3]) {}‎‎
• الوحدات: ‎‎import React, { Component } from 'react';‎‎
• الخاصيات المحسوبة: ‎‎var key = 'abc'; var obj = {[key]: 10};‎‎
• توابع الكائنات الموجزة (Object Concise Method) : ‎‎var obj = { method() { return 10; } };‎‎
• الصيغة المختصرة للكائنات (Object Short Notation): ‎‎var name = 'vjeux'; var obj = { name };‎‎
• معاملات البقيّة (Rest Params): ‎‎function(type, ...args) { }‎‎
• بيانات القوالب الحرفيّة (Template Literals): ‎‎var who = 'world'; var str = `Hello ${who}`;‎‎

ES8

• الفاصلة الإضافية في الدوال: ‎‎function f(a, b, c,) { }‎‎
• الدوال غير المتزامنة: ‎‎async function doStuffAsync() { const foo = await doOtherStuffAsync(); };‎‎

المرحلة 3 (Stage 3)

نشر الكائنات: ‎‎var extended = { ...obj, a: 10 };‎‎

خاصّة (Specific)

JSX: مثل ‎‎<View style={{color: 'red'}} />‎‎

Flow: مثل ‎‎function foo(x: ?number): string {}‎‎

شيفرات Polyfill

تتوفر العديد من الدوال القياسية كذلك في جميع محرّكات JavaScript المدعومة.

المتصفح

• ‎‎console.{log, warn, error, info, trace, table, group, groupEnd}‎‎
• ‎‎require‎‎ الخاصة بمُحمِّل الوحدات CommonJS
• ‎‎XMLHttpRequest, fetch‎‎
• ‎‎{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame‎‎
• ‎‎navigator.geolocation‎‎

ES6

• ‎‎Object.assign‎‎
• ‎‎String.prototype.{startsWith, endsWith, repeat, includes}‎‎
• ‎‎Array.from‎‎
• ‎‎Array.prototype.{find, findIndex}‎‎

ES7

• ‎‎Array.prototype.{includes}‎‎

ES8

• ‎‎Object.{entries, values}‎‎

خاصّة (Specific)

• ‎‎__DEV__‎‎

مصادر

• صفحة JavaScript Environment في توثيق React Native الرسمي.