كيف تعمل معمارية React Native (الجسر مقابل المعمارية الجديدة)؟

Question

Accepted Answer

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

## المعمارية الأصلية: الجسر

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## المعمارية الجديدة (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## لماذا يهم (بشكل عملي)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## لماذا يهم

فهم معمارية React Native هو معرفة قيّمة على مستوى كبار المهندسين لأنه **يشرح سلوك React Native وخصائص أدائه**، مما يعمق القدرة على التفكير في التطبيقات وتحسينها.

البنية الأساسية — تشغيل React Native لـ **خيط JS** (الكود الخاص بك) و**الجانب الأصلي** (واجهة المستخدم، الوحدات الأصلية) التي يجب أن **تتواصل** — هي مفتاح فهم كيفية عمل React Native.

فهم **معمارية الجسر الأصلية** (حيث يتواصل JS والكود الأصلي عبر جسر غير متزامن يقوم بتسلسل الرسائل إلى JSON ويمررها عبر الجسر) يشرح خصائص وقيود أداء React Native التاريخية: كان التواصل غير متزامن فقط، كان لديه عبء التسلسل، والجسر يمكن أن يصبح **اختناقاً مع الحركة الكثيفة** (مما يسبب عدم سلاسة في الانتقال السريع أو الرسوم المتحركة التي تمرر البيانات عبرها) — وهذا هو **السبب في أن تقليل عبورات الجسر وتشغيل الرسوم المتحركة على الخيط الأصلي كانت تحسينات مهمة**، مما يربط المعمارية بنصائح الأداء العملية.

فهم **المعمارية الجديدة** (**JSI** الذي يمكّن من استدعاءات مباشرة وتزامنية JS↔native بدون جسر التسلسل؛ **TurboModules** لتحميل الوحدات الأصلية الكسول؛ **Fabric** للعرض الأفضل؛ Codegen لواجهات آمنة الأنواع) أصبح مهماً بشكل متزايد لأنه أصبح الافتراضي — يحسّن الأداء، يقلل العبء، يمكّن من الاستدعاءات التزامنية، وينتج واجهة مستخدم أسلس، مما يمثل تطوراً كبيراً في React Native.

فهم هذه المعمارية **يشرح أداء React Native** (لماذا كان الجسر مهماً)، **يُطلع على التحسين** (الممارسات التي تتبع من المعمارية)، ويوضح كيفية تنفيذ React Native — مما يحول React Native من صندوق أسود إلى نظام مفهوم.

بما أن فهم المعمارية (الجسر والمعمارية القائمة على JSI الجديدة) يشرح خصائص أداء React Native، ويُطلع على التحسين، ويعكس الوعي بتطورها المهم، وبما أن هذا العمق يرفع المستوى من استخدام React Native إلى فهمه، فإن فهم معمارية React Native هو معرفة قيّمة على مستوى كبار المهندسين — يشرح سلوكها وأدائها، يُطلع على التحسين، ويعكس العمق والوعي بتطور المنصة المتوقع لأدوار كبار مهندسي React Native.