Fabric في React Native — ما هو، معمارية العرض وكيف يعمل

ما هو Fabric؟

Fabric هو نظام عرض جديد لـ React Native حل محل العارض القديم الذي كان يعمل من خلال Shadow Thread و Bridge. في المعمارية القديمة، تضمن عملية العرض ثلاث خطوات: JavaScript يحسب الـ Virtual DOM، Shadow Thread (Yoga) يحسب التخطيط، Native Thread يرسم UIView. Fabric يدمج جميع هذه الخطوات في خط أنابيب C++ واحد يعمل بشكل متزامن.

بدأ تطوير Fabric في 2019 كجزء من مبادرة Lean Core ومشروع «The New Architecture». كان الهدف الرئيسي هو حل مشاكل الأداء المرتبطة بالعرض غير المتزامن ذي الثلاث مراحل. في المعمارية القديمة، كان كل تغيير في الحالة يتطلب ثلاث مرات عبر خيوط مختلفة، مما يخلق تأخيرًا بين تغيير البيانات وعرض واجهة المستخدم.

Fabric يستند إلى مفهوم الشجرة الظلية غير القابلة للتغيير (Immutable Shadow Tree). كل عقدة في الشجرة تمثل مكونًا React مع خصائصه (props) وحالته. عندما تتغير الحالة، يتم إنشاء شجرة جديدة، ويحسب Fabric الفرق بين الشجرة القديمة والجديدة ويطبق فقط التغييرات الضرورية على واجهة المستخدم الأصلية. يقلل هذا من عدد عمليات UIView/ViewGroup ويقصر وقت العرض.

كيف يعمل Shadow Tree

Shadow Tree هو أساس عمل Fabric. على عكس المعمارية القديمة، حيث كانت Shadow Tree موجودة فقط في جانب C++ ومنفصلة عن شجرة JS عبر Bridge غير المتزامن، يقوم Fabric بإنشاء تمثيل هرمي متزامن بالكامل لواجهة المستخدم. تخزن عقد Shadow Tree خصائص، حالة وأنماط المكونات، ويحسب Yoga التخطيط مباشرة على مستوى C++.

عندما يقوم مكون React بتحديث حالته، يرسل React Native Shadow Node جديدًا إلى Fabric. Fabric لا يعيد عرض واجهة المستخدم بأكملها — بل يستخدم خوارزمية مقارنة (diffing) على مستوى C++ لتحديد العقد التي تغيرت. فقط العقد المغيرة يتم إرسالها للعرض الأصلي، مما يقلل حجم العمل بشكل كبير.

عرض Fabric ثلاثي المراحل

تتكون عملية العرض في Fabric من ثلاث مراحل تتنفذ بشكل متزامن على مستوى C++ دون تبديل الخيوط. المرحلة الأولى هي Render: React يستدعي دالة عرض المكون، التي تعيد شجرة عناصر React. المرحلة الثانية هي Commit: React Native ينشئ Shadow Tree جديدة ويحسب التغييرات بناءً على النسخة القديمة. المرحلة الثالثة هي Mount: Fabric يطبق التغييرات على واجهة المستخدم الأصلية، مما ينشئ أو يحدث أو يحذف UIViews.

• Render — يتنفذ على خيط JS، ينشئ شجرة عناصر React.
• Commit — Shadow Tree C++ تحسب الفرق وتشكل قائمة الطفرات.
• Mount — تطبق الطفرات على واجهة المستخدم الأصلية على الخيط الرئيسي.

تعمل المراحل الثلاث كخط أنابيب واحد حيث تنتقل البيانات عبر JSI دون تسلسل. هذا هو الفرق الرئيسي عن المعمارية القديمة، حيث كانت هناك فجوات بين المراحل: JS → (JSON) → Shadow Thread → (تخطيط) → Native Thread.

Fabric مقارنة بالعارض القديم

تظهر مقارنة Fabric مع العارض القديم مدى تغير معمارية React Native بشكل جوهري. كان العارض القديم يعمل بشكل غير متزامن، مقسمًا عملية العرض على ثلاثة خيوط مستقلة. Fabric يدمج كل شيء في خط أنابيب C++ واحد.

في الممارسة، يفيد Fabric بشكل خاص التطبيقات ذات التحديثات المتكررة لواجهة المستخدم: الرسوم المتحركة، التمرير بعناوين عائمة، البيانات في الوقت الفعلي. بالنسبة للصفحات الثابتة (نص، أزرار) الفرق أقل وضوحًا. وفقًا لمعايير Meta، يقلل Fabric وقت عرض القائمة الأولي بنسبة 40–60%.

JSI و Fabric: اتصال جديد

JSI (JavaScript Interface) هو مكون رئيسي يجعل Fabric ممكنًا. من خلال JSI، يحصل Fabric على وصول مباشر إلى قيم JavaScript دون تسلسل. عندما يقوم React بتمرير الخصائص إلى Fabric، لا يتم نسخها عبر JSON — JSI يقوم بتمرير مؤشرات إلى البيانات في ذاكرة محرك JS.

تسمح معمارية JSI لـ Fabric بالعمل مع أي محرك JavaScript — Hermes، JSC أو V8. كود C++ لـ Fabric لا يعتمد على تنفيذ محدد لمحرك JS، مما يبسط الصيانة والاختبار. جميع عمليات واجهة المستخدم — الإنشاء، التحديث، الحذف — تتم من خلال JSI، مما يضمن أقل زمن استجابة.

// خط أنابيب عرض C++ لـ Fabric عبر JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // نقل الخصائص المتزامن عبر JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // حساب التخطيط مباشرة من خلال Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // تطبيق الطفرات على واجهة المستخدم الأصلية
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

الميزة الرئيسية هي التحديث المتزامن. في المعمارية القديمة، كانت واجهة المستخدم تتحدث من خلال طابور غير متزامن: React يرسل أمرًا عبر Bridge، Shadow Thread يعالج التخطيط، Native Thread يعرض. في Fabric، تتنفذ جميع الخطوات بالتسلسل في مرة واحدة. يقضي هذا على حالات السباق ويضمن أن واجهة المستخدم تتطابق مع الحالة الحالية للتطبيق.

الترحيل إلى Fabric

لا يتطلب الترحيل إلى Fabric إعادة كتابة مكونات React — جميع مكونات React Native الحالية تستمر في العمل. ومع ذلك، المكتبات ذات الكود الأصلي (Native Module، ViewManager مخصص) قد تتطلب تحديثات. توصي Meta بالتحقق من توافق كل مكتبة قبل تمكين المعمارية الجديدة.

لتمكين Fabric في مشروع React Native 0.76+، قم بتعيين العلامة newArchEnabled: true في react-native.config.js. سيتم تمكين Fabric تلقائيًا مع Turbo Module. في حال ظهور مشاكل، يمكن تعطيل Fabric بالعودة إلى العارض القديم دون تغيير كود التطبيق — كلا المعماريتين مدعومتان بالتوازي.

// package.json — التحقق من المكتبات المتوافقة مع Fabric
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

عند الترحيل، من المهم تحديث جميع المكتبات الأصلية إلى إصدارات متوافقة مع Fabric. المكتبات الرئيسية مثل react-native-reanimated و react-native-gesture-handler تدعم الفعل المعمارية الجديدة. بالنسبة للمكتبات التي لم تتم تحديثها بعد، يوفر Fabric آلية توافق — إذا كانت المكتبة لا تدعم Fabric، يعود العارض تلقائيًا إلى القديم لتلك المكتبة.