Fabric στο React Native — τι είναι, αρχιτεκτονική απόδοσης και πώς λειτουργεί

Τι είναι το Fabric;

Fabric — είναι ένα νέο σύστημα απόδοσης για το React Native που αντικατέστησε τον παλιό renderer που λειτουργούσε μέσω Shadow Thread και Bridge. Στην παλιά αρχιτεκτονική, η διαδικασία απόδοσης περιλάμβανε τρία βήματα: το JavaScript υπολόγιζε το Virtual DOM, το Shadow Thread (Yoga) υπολόγιζε τη διάταξη, το Native Thread απέδιδε το UIView. Το Fabric συνδυάζει όλα αυτά τα βήματα σε έναν ενιαίο αγωγό C++ που λειτουργεί σύγχρονα.

Η ανάπτυξη του Fabric ξεκίνησε το 2019 ως μέρος της πρωτοβουλίας Lean Core και του έργου “Νέα Αρχιτεκτονική”. Ο κύριος στόχος ήταν η επίλυση προβλημάτων απόδοσης που σχετίζονται με την ασύγχρονη τριφασική απόδοση. Στην παλιά αρχιτεκτονική, κάθε αλλαγή κατάστασης απαιτούσε τρία περάσματα από διαφορετικά νήματα, δημιουργώντας καθυστέρηση μεταξύ της αλλαγής δεδομένων και της απόδοσης του UI.

Το Fabric βασίζεται στην έννοια του αμετάβλητου δέντρου σκιάς (Immutable Shadow Tree). Κάθε κόμβος του δέντρου αντιπροσωπεύει ένα στοιχείο React με τα props και την κατάστασή του. Όταν αλλάζει η κατάσταση, δημιουργείται ένα νέο δέντρο και το Fabric υπολογίζει τη διαφορά μεταξύ του παλιού και του νέου δέντρου και εφαρμόζει μόνο τις απαραίτητες αλλαγές στο εγγενές UI. Αυτό ελαχιστοποιεί τον αριθμό λειτουργιών με UIView/ViewGroup και μειώνει το χρόνο απόδοσης.

Πώς λειτουργεί το Shadow Tree

Shadow Tree — είναι η βάση λειτουργίας του Fabric. Σε αντίθεση με την παλιά αρχιτεκτονική, όπου το Shadow Tree υπήρχε μόνο στην πλευρά C++ και ήταν διαχωρισμένο από το δέντρο JS μέσω ασύγχρονου Bridge, το Fabric δημιουργεί μια πλήρως συγχρονισμένη ιεραρχική αναπαράσταση του UI. Οι κόμβοι Shadow Tree αποθηκεύουν props, κατάσταση και στυλ στοιχείων, και το Yoga υπολογίζει τη διάταξη απευθείας σε επίπεδο C++.

Όταν ένα στοιχείο 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 — το C++ Shadow Tree υπολογίζει diff και σχηματίζει τη λίστα μεταλλάξεων.
• Mount — οι μεταλλάξεις εφαρμόζονται στο εγγενές UI στο κύριο νήμα.

Και οι τρεις φάσεις λειτουργούν ως ένας ενιαίος αγωγός, όπου τα δεδομένα μεταδίδονται μέσω JSI χωρίς σειριοποίηση. Αυτή είναι η βασική διαφορά από την παλιά αρχιτεκτονική, όπου υπήρχαν διακοπές μεταξύ των φάσεων: JS → (JSON) → Shadow Thread → (διάταξη) → Native Thread.

Fabric vs παλιός renderer: σύγκριση

Η σύγκριση του Fabric με τον παλιό renderer δείχνει πόσο σημαντικά έχει αλλάξει η αρχιτεκτονική του React Native. Ο παλιός renderer λειτουργούσε ασύγχρονα, χωρίζοντας τη διαδικασία απόδοσης σε τρία ανεξάρτητα νήματα. Το Fabric συνδυάζει τα πάντα σε έναν ενιαίο αγωγό C++.

Στην πράξη, το Fabric είναι ιδιαίτερα επωφελές για εφαρμογές με συχνές ενημερώσεις UI: κινούμενα σχέδια, κύλιση με αιωρούμενες κεφαλίδες, δεδομένα πραγματικού χρόνου. Για στατικές σελίδες (κείμενο, κουμπιά) η διαφορά είναι λιγότερο αισθητή. Σύμφωνα με τα benchmarks της 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();

    // Σύγχρονη μεταφορά props μέσω JSI
    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, όλα τα βήματα εκτελούνται διαδοχικά σε ένα πέρασμα. Αυτό εξαλείφει τις συνθήκες ανταγωνισμού (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 μπορεί να απενεργοποιηθεί επιστρέφοντας στον παλιό renderer χωρίς αλλαγή του κώδικα εφαρμογής — και οι δύο αρχιτεκτονικές υποστηρίζονται παράλληλα.

// 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, ο renderer μεταβαίνει αυτόματα στον παλιό για αυτήν τη βιβλιοθήκη.