Fabric در React Native — چیست، معماری رندرینگ و نحوه کار

Fabric چیست؟

Fabric — یک سیستم رندرینگ جدید برای React Native است که جایگزین رندرر قدیمی شده که از طریق Shadow Thread و Bridge کار می‌کرد. در معماری قدیمی، فرآیند رندرینگ شامل سه مرحله بود: JavaScript محاسبه Virtual DOM، Shadow Thread (Yoga) محاسبه layout، Native Thread رندر UIView. Fabric تمام این مراحل را در یک خط لوله C++ واحد که به صورت همزمان کار می‌کند ترکیب می‌کند.

توسعه Fabric در سال 2019 به عنوان بخشی از ابتکار Lean Core و پروژه «معماری جدید» آغاز شد. هدف اصلی حل مشکلات عملکردی مرتبط با رندرینگ ناهمزمان سه مرحله‌ای بود. در معماری قدیمی، هر تغییر وضعیت نیاز به سه عبور از میان رشته‌های مختلف داشت که باعث تأخیر بین تغییر داده و رندر UI می‌شد.

Fabric بر اساس مفهوم درخت سایه غیرقابل تغییر (Immutable Shadow Tree) ساخته شده است. هر گره درخت یک کامپوننت React را با props و state آن نمایش می‌دهد. هنگام تغییر وضعیت، یک درخت جدید ایجاد می‌شود و Fabric تفاوت بین درخت قدیم و جدید را محاسبه کرده و فقط تغییرات لازم را در UI بومی اعمال می‌کند. این کار تعداد عملیات UIView/ViewGroup را به حداقل رسانده و زمان رندرینگ را کاهش می‌دهد.

Shadow Tree چگونه کار می‌کند

Shadow Tree — اساس کار Fabric است. بر خلاف معماری قدیمی که در آن Shadow Tree فقط در سمت C++ وجود داشت و از طریق Bridge ناهمزمان از درخت JS جدا شده بود، Fabric یک نمایش سلسله‌مراتبی کاملاً همزمان از UI ایجاد می‌کند. گره‌های Shadow Tree props، state و استایل‌های کامپوننت‌ها را ذخیره می‌کنند و Yoga مستقیماً در سطح C++ layout را محاسبه می‌کند.

هنگامی که یک کامپوننت React وضعیت خود را به‌روز می‌کند، React Native یک Shadow Node جدید به Fabric ارسال می‌کند. Fabric کل UI را دوباره رندر نمی‌کند — از الگوریتم مقایسه (diffing) در سطح C++ برای تعیین گره‌های تغییر یافته استفاده می‌کند. فقط گره‌های تغییر یافته به رندر بومی ارسال می‌شوند که حجم کار را به طور قابل توجهی کاهش می‌دهد.

رندرینگ سه فازی Fabric

فرآیند رندرینگ در Fabric شامل سه فاز است که به صورت همزمان در سطح C++ بدون تغییر رشته اجرا می‌شوند. فاز اول — Render: React تابع رندر کامپوننت را فراخوانی می‌کند که React Element Tree را برمی‌گرداند. فاز دوم — Commit: React Native یک Shadow Tree جدید ایجاد کرده و تغییرات را بر اساس نسخه قدیم محاسبه می‌کند. فاز سوم — Mount: Fabric تغییرات را در UI بومی اعمال کرده و UIView را ایجاد، به‌روزرسانی یا حذف می‌کند.

• Render — در رشته JS اجرا می‌شود و React Element Tree را ایجاد می‌کند.
• Commit — Shadow Tree در C++ تفاوت (diff) را محاسبه کرده و لیست جهش‌ها را تشکیل می‌دهد.
• Mount — جهش‌ها در رشته اصلی در UI بومی اعمال می‌شوند.

هر سه فاز به عنوان یک خط لوله واحد کار می‌کنند که در آن داده‌ها از طریق JSI بدون سریال‌سازی منتقل می‌شوند. این تفاوت کلیدی با معماری قدیمی است که در آن بین فازها شکاف وجود داشت: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric در مقابل رندرر قدیمی: مقایسه

مقایسه Fabric با رندرر قدیمی نشان می‌دهد که معماری React Native چقدر تغییر کرده است. رندرر قدیمی به صورت ناهمزمان کار می‌کرد و فرآیند رندرینگ را به سه رشته مستقل تقسیم می‌کرد. Fabric همه چیز را در یک خط لوله C++ ترکیب می‌کند.

در عمل، Fabric به ویژه برای برنامه‌هایی با به‌روزرسانی‌های مکرر UI مفید است: انیمیشن‌ها، اسکرول با هدرهای شناور، داده‌های بلادرنگ. برای صفحات ایستا (متن، دکمه‌ها) تفاوت کمتر محسوس است. طبق بنچمارک‌های Meta، Fabric زمان رندرینگ بارگذاری اولیه لیست را 40–60٪ کاهش می‌دهد.

JSI و Fabric: ارتباط جدید

JSI (JavaScript Interface) — جزء کلیدی است که Fabric را ممکن می‌سازد. از طریق JSI، Fabric به مقادیر JavaScript بدون سریال‌سازی دسترسی مستقیم پیدا می‌کند. هنگامی که React props را به Fabric منتقل می‌کند، آنها از طریق JSON کپی نمی‌شوند — JSI اشاره‌گرهایی به داده‌ها در حافظه موتور JS ارسال می‌کند.

معماری JSI به Fabric اجازه می‌دهد با هر موتور JavaScript — Hermes، JSC یا V8 کار کند. کد C++ Fabric به پیاده‌سازی خاص موتور JS وابسته نیست که نگهداری و آزمایش را ساده می‌کند. تمام عملیات با UI — ایجاد، به‌روزرسانی، حذف — از طریق 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);

    // محاسبه layout مستقیماً از طریق Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // اعمال جهش‌ها در UI بومی
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

مزیت اصلی — به‌روزرسانی همزمان. در معماری قدیمی، UI از طریق یک صف ناهمزمان به‌روزرسانی می‌شد: React دستوری را از طریق Bridge ارسال می‌کرد، Shadow Thread layout را پردازش می‌کرد، Native Thread رندر می‌کرد. در Fabric، تمام مراحل به صورت متوالی در یک عبور اجرا می‌شوند. این کار شرایط مسابقه (race conditions) را حذف کرده و تضمین می‌کند که UI با وضعیت فعلی برنامه مطابقت دارد.

مهاجرت به 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 پشتیبانی نکند، رندرر به طور خودکار برای آن کتابخانه به حالت قدیم سوئیچ می‌کند.