الفرق بين المراجعتين ل"ReactNative/javascript environment"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE: بيئة JavaScript في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE: بيئة JavaScript في React Native}}</noinclude>عند استخدام React Native، ستُشغَّل شيفرة JavaScript في بيئتين (JavaScript Runtime):
−
 
 
−
== بيئة JavaScript==
 
−
==برنامج وقت التشغيل (JavaScript Runtime)==
 
−
عند استخدام React Native، ستُشغَّل شيفرة JavaScript في بيئتين:
 
 
* في معظم الحالات، سيستخدم React Native مُحرّكَ [http://trac.webkit.org/wiki/JavaScriptCore JavaScriptCore]، وهو محركُ JavaScript الذي يعتمد عليه متصفح Safari. لاحظ أنه على نظام iOS، لا يستخدم محرّك JavaScriptCore ميّزة JIT نظرًا لعدم وجود ذاكرة قابلة للكتابة والتنفيذ (writable executable memory) في تطبيقات iOS.
 
* في معظم الحالات، سيستخدم React Native مُحرّكَ [http://trac.webkit.org/wiki/JavaScriptCore JavaScriptCore]، وهو محركُ JavaScript الذي يعتمد عليه متصفح Safari. لاحظ أنه على نظام iOS، لا يستخدم محرّك JavaScriptCore ميّزة JIT نظرًا لعدم وجود ذاكرة قابلة للكتابة والتنفيذ (writable executable memory) في تطبيقات iOS.
  
سطر 11: سطر 7:
  
 
==محولات بنية (Syntax Transformers) لغة JavaScript==
 
==محولات بنية (Syntax Transformers) لغة JavaScript==
−
تجعل محوّلات البنية كتابةَ الشيفرة أمْتعَ وأرْيحَ من خلال السماح لك باستخدام بنية JavaScript الجديدة دون الحاجة إلى انتظار الدعم الكامل لها.
+
تجعل محوّلات البنية كتابةَ الشيفرة أمْتعَ وأرْيحَ من خلال السماح لك باستخدام بنية [[JavaScript]] الجديدة دون الحاجة إلى انتظار الدعم الكامل لها.
 +
 
 
يأتي React Native مع مترجم [https://babeljs.io/ Babel]. انظر [https://babeljs.io/docs/plugins/#transform-plugins توثيق Babel] لمزيد من التفاصيل حول  التحويلات المدعومة.
 
يأتي React Native مع مترجم [https://babeljs.io/ Babel]. انظر [https://babeljs.io/docs/plugins/#transform-plugins توثيق Babel] لمزيد من التفاصيل حول  التحويلات المدعومة.
  
 
إليك [https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset قائمة كاملة بالتحويلات المُمَكَّنة في React Native].
 
إليك [https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset قائمة كاملة بالتحويلات المُمَكَّنة في React Native].
 +
{| class="wikitable"
 +
!التحويل
 +
!الشيفرة
 +
|-
 +
| colspan="2" |ECMAScript 5
 +
|-
 +
|الكلمات المحجوزة
 +
|<syntaxhighlight lang="js">
 +
promise.catch(function() { });‎
 +
</syntaxhighlight>
 +
|-
 +
| colspan="2" |ECMAScript 2015 (ES6)
 +
|-
 +
|[[JavaScript/Arrow Functions|الدوال السهمية]]
 +
|<syntaxhighlight lang="js">
 +
‎‎<C onPress={() => this.setState({ pressed: true })} />‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/let|نطاق الكتل]]  (Block scoping)
 +
|<syntaxhighlight lang="js">
 +
‎‎let greeting = 'hi';‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/Spread Operator|عامل النشر]]
 +
|<syntaxhighlight lang="js">
 +
Math.max(...array);
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/class|الأصناف]]
 +
|<syntaxhighlight lang="js">
 +
class C extends React.Component { render() { return <View />; } }
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/learn#enhanced-object-literals الخاصيات المحسوبة]
 +
|<syntaxhighlight lang="js">
 +
‎‎var key = 'abc'; var obj = {[key]: 10};‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/const|الثوابت]]
 +
|<syntaxhighlight lang="js">
 +
‎‎const answer = 42;
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/Destructuring Assignment|التفكيك]]
 +
|<syntaxhighlight lang="js">
 +
var {isActive, style} = this.props;‎‎
 +
</syntaxhighlight>
 +
|-
 +
|<code>[[JavaScript/for...of|for...of]]</code>
 +
|<syntaxhighlight lang="js">
 +
for (var num of [1, 2, 3]) {}‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-function-name اسم دالة]
 +
|<syntaxhighlight lang="js">
 +
let number = x => x;
 +
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-literals القيم مصنفة النوع (literals)]
 +
|<syntaxhighlight lang="js">
 +
const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/import|الوحدات]]
 +
|<syntaxhighlight lang="js">
 +
import React, { Component } from 'react';‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[http://babeljs.io/docs/learn-es2015/#enhanced-object-literals توابع الكائنات الموجزة] (Object Concise Method)
 +
|<syntaxhighlight lang="js">
 +
var obj = { method() { return 10; } };
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/Object|الصيغة المختصرة للكائنات]] (Object Short Notation)
 +
|<syntaxhighlight lang="js">
 +
var name = 'vjeux'; var obj = { name };
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-parameters المعاملات (Parameters)]
 +
|<syntaxhighlight lang="js">
 +
function test(x = 'hello', { a, b }, ...args) {}
 +
 +
</syntaxhighlight>
 +
|-
 +
|[[JavaScript/Rest Parameters|معاملات البقيّة]] (Rest Params)
 +
|<syntaxhighlight lang="js">
 +
function(type, ...args) { }‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties الخاصيات المختصرة (Shorthand Properties)]
 +
|<syntaxhighlight lang="js">
 +
const o = { a, b, c };
 +
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex الراية اللاصقة Sticky من التعابير النمطية Regex]
 +
|<syntaxhighlight lang="js">
 +
const a = /o+/y;
  
−
====ES5====
+
</syntaxhighlight>
 +
|-
 +
| [[JavaScript/String#.D8.A7.D9.84.D9.82.D9.88.D8.A7.D9.84.D8.A8|قالب النص الحديث]] (Template Literals)
 +
|<syntaxhighlight lang="js">
 +
var who = 'world'; var str = `Hello ${who}`;‎‎
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex محارف يونيكود Unicode في التعابير النمطية Regex]
 +
|<syntaxhighlight lang="js">
 +
const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);
  
−
الكلمات المحجوزة: ‎‎<code>promise.catch(function() { });</code>‎‎
+
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''ECMAScript 2016 (ES7)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator معامل الأس (Exponentiation Operator)]
 +
|<syntaxhighlight lang="js">
 +
let x = 10 ** 2;
  
−
====ES6====
+
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''ECMAScript 2017 (ES8)'''
 +
|-
 +
|[[JavaScript/async function|الدوال غير المتزامنة]]
 +
|<syntaxhighlight lang="js">
 +
async function doStuffAsync() { const foo = await doOtherStuffAsync(); };
 +
</syntaxhighlight>
 +
|-
 +
|[https://github.com/jeffmo/es-trailing-function-commas الفاصلة الإضافية في الدوال]
 +
|<syntaxhighlight lang="js">
 +
function f(a, b, c,) { }
 +
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''ECMAScript 2019 (ES10)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding التقاط الأخطاء try/catch الاختياري (Optional Catch Binding)]
 +
|<syntaxhighlight lang="js">
 +
try { throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown(); }
 +
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''ECMAScript 2020 (ES11)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import الاستيراد الديناميكي (Dynamic Imports)]
 +
|<syntaxhighlight lang="js">
 +
const package = await import('package'); package.function()
 +
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''المرحلة 1 (Stage 1 Proposal)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from التصدير الافتراضي (Export Default From)]
 +
|<syntaxhighlight lang="js">
 +
export v from 'mod';
  
−
* [[JavaScript/Arrow Functions|الدوال السهمية]]: ‎‎<code><C onPress={() => this.setState({pressed: true})}</code>‎‎
+
</syntaxhighlight>
−
* [[JavaScript/let|نطاق الكتل]] (Block scoping): ‎‎<code>let greeting = 'hi';</code>‎‎
+
|-
−
* [[JavaScript/Spread Operator|النشر]]: ‎‎<code>Math.max(...array);</code>‎‎
+
| colspan="2" |'''المرحلة 3 (Stage 3 Proposal)'''
−
* [[JavaScript/class|الأصناف]]: ‎‎<code>class C extends React.Component { render() { return <View />; } }</code>‎‎
+
|-
−
* [[JavaScript/const|الثوابت]]: ‎‎<code>const answer = 42;</code>‎‎
+
|[[JavaScript/Spread Operator|نشر الكائنات]]
−
* [[JavaScript/Destructuring Assignment|التفكيك]]: ‎‎<code>var {isActive, style} = this.props;</code>‎‎
+
|<syntaxhighlight lang="js">
−
* ‎‎<code>[[JavaScript/for...of|for...of]]</code>‎‎: مثل <code>for (var num of [1, 2, 3]) {}</code>‎‎
+
var extended = { ...obj, a: 10 };
−
* [[JavaScript/import|الوحدات]]: ‎‎<code>import React, { Component } from 'react';</code>‎‎
+
</syntaxhighlight>
−
* [https://babeljs.io/docs/en/learn#enhanced-object-literals الخاصيات المحسوبة]: ‎‎<code>var key = 'abc'; var obj = {[key]: 10};</code>‎‎
+
|-
−
* [http://babeljs.io/docs/learn-es2015/#enhanced-object-literals توابع الكائنات الموجزة] (Object Concise Method) : ‎‎<code>var obj = { method() { return 10; } };</code>‎‎
+
|[https://github.com/tc39/proposal-static-class-features) الخاصيات الساكنة static في الأصناف]
−
* [[JavaScript/Object|الصيغة المختصرة للكائنات]] (Object Short Notation): ‎‎<code>var name = 'vjeux'; var obj = { name };</code>‎‎
+
|<syntaxhighlight lang="js">
−
* [[JavaScript/Rest Parameters|معاملات البقيّة]] (Rest Params): ‎‎<code>function(type, ...args) { }</code>‎‎
+
class CustomDate { static epoch = new CustomDate(0); }
−
* [[JavaScript/String#.D8.A7.D9.84.D9.82.D9.88.D8.A7.D9.84.D8.A8|بيانات القوالب الحرفيّة]] (Template Literals): ‎‎<code>var who = 'world'; var str = `Hello ${who}`;</code>‎‎
+
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''المرحلة 4 (Stage 4 Proposal)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator عامل الاستبدال اللاغي (Nullish Coalescing Operator)]
 +
|<syntaxhighlight lang="js">
 +
const foo = object.foo ?? 'default';
  
−
====ES8====
+
</syntaxhighlight>
 +
|-
 +
|[https://academy.hsoub.com/programming/javascript/%D8%A7%D9%84%D8%AA%D8%B3%D9%84%D8%B3%D9%84-%D8%A7%D9%84%D8%A7%D8%AE%D8%AA%D9%8A%D8%A7%D8%B1%D9%8A-%D9%84%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D9%83%D8%A7%D8%A6%D9%86-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1007/ التسلسل الاختياري (Optional Chaining)]
 +
|<syntaxhighlight lang="js">
 +
const name = obj.user?.name;
  
−
* [https://github.com/jeffmo/es-trailing-function-commas الفاصلة الإضافية في الدوال]: ‎‎<code>function f(a, b, c,) { }</code>‎‎
+
</syntaxhighlight>
−
* [[JavaScript/async function|الدوال غير المتزامنة]]: ‎‎<code>async function doStuffAsync() { const foo = await doOtherStuffAsync(); };</code>‎‎
+
|-
 +
| colspan="2" |'''مراحل أخرى (Other Proposals)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-proposal-class-properties خاصيات الصنف (Class Properties)]
 +
|<syntaxhighlight lang="js">
 +
class Bork { static a = 'foo'; static b; x = 'bar'; y; }
 +
</syntaxhighlight>
 +
|-
 +
| colspan="2" |'''أخرى (Miscellaneous)'''
 +
|-
 +
|[https://babeljs.io/docs/en/babel-template قالب بابل (Babel Template)]
 +
|<syntaxhighlight lang="js">
 +
template(`const %%importName%% = require(%%source%%);`);
  
−
====المرحلة 3 (Stage 3)====
+
</syntaxhighlight>
−
[[JavaScript/Spread Operator|نشر الكائنات]]: ‎‎<code>var extended = { ...obj, a: 10 };</code>‎‎
+
|-
 +
|[https://flowtype.org/ Flow]
 +
|<syntaxhighlight lang="js">
 +
function foo(x: ?number): string {}
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs تحويل ESM إلى CJS]
 +
|<syntaxhighlight lang="js">
 +
export default 42;
  
−
====خاصّة (Specific)====
+
</syntaxhighlight>
−
[[React/introducing jsx|JSX]]: مثل ‎‎<code><nowiki><View style={{color: 'red'}} /></nowiki></code>‎‎
+
|-
 +
|[[React/jsx in depth|JSX]]
 +
|<syntaxhighlight lang="js">
 +
<View style={{ color: 'red' }} />
  
−
Flow: مثل ‎‎<code>function foo(x: ?number): string {}</code>‎‎
+
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-object-assign الخاصية <code>assign</code> في <code>Object</code>]
 +
|<syntaxhighlight lang="js">
 +
Object.assign(a, b);
 +
</syntaxhighlight>
 +
|-
 +
|[https://babeljs.io/docs/en/babel-plugin-transform-react-display-name الخاصية <code>displayName</code> في الأصناف المنشأة عبر React]
 +
|<syntaxhighlight lang="js">
 +
const bar = createReactClass({});
  
−
TypeScript: مثل <code>{} function foo(x: number | undefined): string</code> 
+
</syntaxhighlight>
 +
|-
 +
|[[TypeScript]]
 +
|<syntaxhighlight lang="js">
 +
function foo(x: { hello: true, target: 'react native!' }): string {};
  
−
Babel Template: يسمح بنماذج AST
+
</syntaxhighlight>
 +
|}
  
−
==شيفرات Polyfill==
+
==شيفرات تعويض نقص الدعم Polyfill==
 
تتوفر العديد من الدوال القياسية كذلك في جميع محرّكات JavaScript المدعومة.
 
تتوفر العديد من الدوال القياسية كذلك في جميع محرّكات JavaScript المدعومة.
  
−
====المتصفح====
+
===المتصفح===
 
* [[JavaScript|‎‎<code>console.{log, warn, error, info, trace, table, group, groupEnd}</code>‎‎]]
 
* [[JavaScript|‎‎<code>console.{log, warn, error, info, trace, table, group, groupEnd}</code>‎‎]]
 
* ‎‎[[Node.js/modules|<code>require</code>‎‎]] الخاصة بمُحمِّل الوحدات  CommonJS
 
* ‎‎[[Node.js/modules|<code>require</code>‎‎]] الخاصة بمُحمِّل الوحدات  CommonJS
 
* [[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>‎‎]]
 
* [[JavaScript/String|‎‎<code>String.prototype.{startsWith, endsWith, repeat, includes}</code>‎‎]]
 
* [[JavaScript/String|‎‎<code>String.prototype.{startsWith, endsWith, repeat, includes}</code>‎‎]]
سطر 67: سطر 257:
 
* [[JavaScript/Array|‎‎<code>Array.prototype.{find, findIndex}</code>‎‎]]  
 
* [[JavaScript/Array|‎‎<code>Array.prototype.{find, findIndex}</code>‎‎]]  
  
−
==== ES7 ====
+
=== ES7 ===
 
* [[JavaScript/Array|‎‎<code>Array.prototype.{includes}</code>‎‎]]
 
* [[JavaScript/Array|‎‎<code>Array.prototype.{includes}</code>‎‎]]
−
==== ES8 ====
+
=== ES8 ===
 
* [[JavaScript/Object|‎‎<code>Object.{entries, values}</code>‎‎]]
 
* [[JavaScript/Object|‎‎<code>Object.{entries, values}</code>‎‎]]
−
==== خاصّة (Specific) ====
+
=== خاصّة (Specific) ===
 
* ‎‎<code>__DEV__</code>‎‎
 
* ‎‎<code>__DEV__</code>‎‎
 
== مصادر ==
 
== مصادر ==
−
* [https://facebook.github.io/react-native/docs/javascript-environment صفحة JavaScript Environment في توثيق React Native الرسمي.]
+
* [https://reactnative.dev/docs/javascript-environment صفحة JavaScript Environment في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]

مراجعة 09:32، 2 سبتمبر 2021

عند استخدام 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 المدعومة.

المتصفح

ES6

ES7

ES8

خاصّة (Specific)

  • ‎‎__DEV__‎‎

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/javascript_environment&oldid=31293"