ما هي الـ New Architecture في React Native وما هو دور الـ JSI (JavaScript Interface)؟

الإجابة المختصرة

الـ JSI هي طبقة برمجية وسيطة مكتوبة بـ C++ تسمح لخيط JavaScript بالاحتفاظ بمراجع مباشرة لكائنات C++/Native واستدعاء دوالها بشكل متزامن دون أي تسلسل JSON أو وسطاء.

الشرح

تلغي المعمارية الجديدة الـ Bridge تماماً. باستخدام JSI، يمكن لمحرك الـ JS (مثل Hermes) استدعاء دوال النظام الأصلية مباشرة كأنها دوال JavaScript عادية مع وصول مشترك للذاكرة المشتركة (Shared Memory)، مما يرفع سرعة الاتصال إلى سرعات الكود الأصلي المباشر ويفتح الباب أمام استدعاءات متزامنة وغير متزامنة فائقة السرعة.

مثال بالكود

// NativeBattery.ts — a TurboModule spec; Codegen generates the C++ glue from it
import type { TurboModule } from "react-native";
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  getLevelSync(): number;          // synchronous call straight into native code through JSI
  getLevel(): Promise<number>;     // async variant for work that can block
}

export default TurboModuleRegistry.getEnforcing<Spec>("Battery");

// usage
// const level = NativeBattery.getLevelSync();   // no bridge, no JSON serialization

أخطاء شائعة

• الاعتقاد بأن JSI مخصص فقط لنظام iOS، في حين أنه مبني بلغة C++ ويعمل بالتساوي على iOS و Android.

أسئلة متابعة

• ما الفرق بين AsyncStorage ومكتبة react-native-mmkv ولماذا تعتبر MMKV أسرع بمراحل؟
• ما هي معمارية React Native التقليدية (The Bridge) وما هي الاختناقات الأدائية المرتبطة بها؟

المصادر

• React Native docs — About the New Architecture