React Native में Fabric — यह क्या है, रेंडरिंग आर्किटेक्चर और यह कैसे काम करता है

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» परियोजना के हिस्से के रूप में शुरू हुआ था। मुख्य उद्देश्य असिंक्रोनस् तीन-रंग रेंडरिंग से जुड़ी प्रदर्शन समस्याओं को हल करना था। पुराने आर्किटेक्चर में, प्रत्येक स्थिति परिवर्तन के लिए अलग-अलग थ्रेड के माध्यम से तीन पास की आवश्यकता होती थी, जिससे डाटा परिवर्तन और UI रेंडरिंग के बीच विलम्ब होता था।

Fabric अपरिवर्तनीय शेडो ट्री (Immutable Shadow Tree) की अवधारणा पर आधारित है। पेड़ का प्रत्येक नोड अपने props और स्थिति के साथ एक React घटक का प्रतिनिधित्व करता है। जब स्थिति बदलती है, तो एक नया पेड़ बनाया जाता है, और Fabric पुराने और नए पेड़ के बीच का अंतर ज्ञात करता है और केवल आवश्यक परिवर्तनों को मूल UI पर लागू करता है। यह UIView/ViewGroup संचालनों की संख्या को कम करता है और रेंडरिंग समय को कम करता है।

Shadow Tree कैसे काम करता है

Shadow Tree Fabric के संचालन की नींव है। पुराने आर्किटेक्चर के विपरीत, जहां Shadow Tree केवल C++ पक्ष पर मौजूद थी और असिंक्रोनस् Bridge के माध्यम से JS पेड़ से अलग की गई थी, Fabric UI का पूरी तरह से सिंक्रोनाइज़ड पदानुक्रमिक प्रतिनिधित्व बनाता है। Shadow Tree नोड घटकों के props, स्थिति और शैलियों को संग्रहीत करते हैं, और Yoga सीधे C++ स्तर पर लेआआउट की गणना करता है।

जब कोई React घटक अपनी स्थिति अपडेट करता है, तो React Native Fabric को एक नया Shadow Node भेजता है। Fabric पूरे UI को पुनः रेंडर नहीं करता — यह यह निर्धारित करने के लिए C++ स्तर पर एक डिफिंग एल्गोरिदम का उपयोग करता है कि कौन से नोड बदल गए हैं। केवल बदले हुए नोड को मूल रेंडरिंग के लिए भेजा जाता है, जो कार्य की मात्रा को काफी कम करता है।

Fabric का तीन-चरणीय रेंडरिंग

Fabric में रेंडरिंग प्रक्रिया में तीन चरण होते हैं जो थ्रेड स्विचिंग के बिना C++ स्तर पर सिंक्रोनस्यूस रूप से निष्पादित होते हैं। पहला चरण है Render: React घटक के रेंडर फ़ंक्शन को कॉल करता है, जो एक React Element Tree लौटाता है। दूसरा चरण है Commit: React Native एक नए Shadow Tree को बनाता है और पुराने संस्करण के आधार पर परिवर्तनों की गणना करता है। तीसरा चरण है Mount: Fabric मूल UI पर परिवर्तनों को लागू करता है, UIViews को बनाता, अपडेट करता या हटाता है।

• Render — JS थ्रेड पर निष्पादित, एक React Element Tree बनाता है।
• Commit — C++ Shadow Tree डिफ की गणना करता है और उत्परिवर्तनों की सूची बनाता है।
• Mount — मुख्य थ्रेड पर मूल UI पर उत्परिवर्तन लागू किए जाते हैं।

तीनों चरण एक ही पाइपलाइन के रूप में काम करते हैं जहां डाटा बिना सेरियलाइज़ेशन के JSI के माध्यम से स्थानांतरित होता है। यह पुराने आर्किटेक्चर से एक मुख्य अंतर है, जहां चरणों के बीच अंतराल थे: JS → (JSON) → Shadow Thread → (लेआआउट) → Native Thread।

Fabric बनाम पुराना रेंडरर: तुलना

Fabric की पुराने रेंडरर से तुलना यह दर्शाती है कि React Native आर्किटेक्चर में कितना मौलिक परिवर्तन आया है। पुराना रेंडरर असिंक्रोनस्यूस रूप से काम करता था, रेंडरिंग प्रक्रिया को तीन स्वतंत्र थ्रेड में विभाजित करता था। Fabric सभी कुछ को एक C++ पाइपलाइन में संयोजित करता है।

व्यवहारिक रूप से, Fabric विशेष रूप से बार-बार UI अपडेट वाले एप्लिकेशनों के लिए फायदेमंद है: एनिमेशन, फ्लोटिंग हेडर के साथ स्क्रोल, रियल-टाइम डेटा। स्थिर पृष्ठों (टेक्स्ट, बटन) के लिए अंतर कम ध्यान देने योग्य है। Meta बेंचमार्क के अनुसार, Fabric सूची के प्रारंभिक रेंडरिंग समय को 40–60% कम करता है।

JSI और Fabric: नया संचार

JSI (JavaScript Interface) एक मुख्य घटक है जो Fabric को संभव बनाता है। JSI के माध्यम से, Fabric बिना सेरियलाइज़ेशन के JavaScript मानों तक प्रत्यक्ष पहुंच प्राप्त करता है। जब React Fabric को props भेजता है, तो उन्हें JSON के माध्यम से कॉपी नहीं किया जाता — JSI JS इंजन की मेमरी में डेटा के लिए पॉइंटर भेजता है।

JSI आर्किटेक्चर Fabric को किसी भी JavaScript इंजन के साथ काम करने की अनुमति देता है — Hermes, JSC या V8। Fabric C++ कोड किसी विशिष्ट JS इंजन कार्यान्वयन पर निर्भर नहीं करता, जो रखरखाव और परीक्षण को सरल बनाता है। सभी UI संचालन — सर्जन, अपडेट, हटाना — JSI के माध्यम से किए जाते हैं, जो न्यूनतम विलम्ब सुनिश्चित करता है।

// JSI के माध्यम से Fabric C++ रेंडरिंग पाइपलाइन
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // JSI के माध्यम से सिंक्रोनस् prop स्थानांतरण
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Yoga के माध्यम से सीधे लेआआउट गणना
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // मूल UI पर उत्परिवर्तन लागू करें
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

मुख्य लाभ सिंक्रोनस् अपडेट है। पुराने आर्किटेक्चर में, UI को एक असिंक्रोनस् क्यू के माध्यम से अपडेट किया जाता था: React Bridge के माध्यम से एक कमांड भेजता था, Shadow Thread लेआआउट का प्रसंस्करण करता था, Native Thread रेंडर करता था। Fabric में, सभी चरण एक ही पास में अनुक्रमिक रूप से निष्पादित होते हैं। यह रेस कंडीशनों को समाप्त करता है और सुनिश्चित करता है कि UI एप्लिकेशन की वर्तमान स्थिति से मेल खाता है।

Fabric में स्थानांतरण

Fabric में स्थानांतरण के लिए React घटकों को फिर से लिखने की आवश्यकता नहीं है — सभी मौजूदा React Native घटक काम करते रहते हैं। हालांकि, मूल कोड (Native Module, कस्टम ViewManager) वाली लाइब्रेरियों को अपडेट की आवश्यकता हो सकती है। Meta नए आर्किटेक्चर को सक्षम करने से पहले प्रत्येक लाइब्रेरी की अनुकूलता जाँचने की सिफारिश करता है।

React Native 0.76+ प्रोजेक्ट में Fabric को सक्षम करने के लिए, react-native.config.js में newArchEnabled: true फ्लैग सेट करें। 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 का समर्थन नहीं करती, तो रेंडरर स्वचालित रूप से उस लाइब्रेरी के लिए पुराने पर वापस आ जाता है।