الفرق بين المراجعتين ل"ReactNative/javascript environment"
Basema-bakleh (نقاش | مساهمات) |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: بيئة JavaScript في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE: بيئة JavaScript في React Native}}</noinclude> | ||
| + | |||
== بيئة JavaScript== | == بيئة JavaScript== | ||
==برنامج وقت التشغيل (JavaScript Runtime)== | ==برنامج وقت التشغيل (JavaScript Runtime)== | ||
| سطر 47: | سطر 48: | ||
Flow: مثل <code>function foo(x: ?number): string {}</code> | Flow: مثل <code>function foo(x: ?number): string {}</code> | ||
| + | |||
| + | TypeScript: مثل <code>{} function foo(x: number | undefined): string</code> | ||
| + | |||
| + | Babel Template: يسمح بنماذج AST | ||
==شيفرات Polyfill== | ==شيفرات Polyfill== | ||
| سطر 56: | سطر 61: | ||
* [[ReactNative/network|<code>XMLHttpRequest, fetch</code>]] | * [[ReactNative/network|<code>XMLHttpRequest, fetch</code>]] | ||
* [[ReactNative/timers|<code>{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame</code>]] | * [[ReactNative/timers|<code>{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame</code>]] | ||
| − | |||
==== ES6 ==== | ==== ES6 ==== | ||
* [[JavaScript/Object/assign|<code>Object.assign</code>]] | * [[JavaScript/Object/assign|<code>Object.assign</code>]] | ||
مراجعة 09:05، 25 مارس 2021
بيئة JavaScript
برنامج وقت التشغيل (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 {}
TypeScript: مثل {} function foo(x: number | undefined): string
Babel Template: يسمح بنماذج AST
شيفرات 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__