Πώς το React Native κατασκευάζει διατάξεις εφαρμογών (και πώς το Fabric πρόκειται να το αλλάξει)

Η ομάδα του React Native εργάζεται πάνω σε κάτι που ουσιαστικά πρόκειται να αλλάξει τον τρόπο με τον οποίο λειτουργούν τα εσωτερικά της επικοινωνίας React Native με το λειτουργικό σύστημα υποδοχής. Είναι όμορφα κωδικοποιημένο "project fabric" (έως ότου κυκλοφορήσει ένα επίσημο όνομα).

Ας συζητήσουμε τι είναι πραγματικά και τι αλλαγές φέρνει σε εσάς ως προγραμματιστής.

Πώς λειτουργεί το React Native αυτή τη στιγμή

Αν ρίξουμε μια ματιά, το React Native χρησιμοποιεί τώρα 3 νήματα:

  1. UI Thread - Αυτό είναι το κύριο νήμα εφαρμογών στο οποίο εκτελείται η εφαρμογή σας Android / iOS. Έχει πρόσβαση σε διεπαφή χρήστη και η διεπαφή χρήστη μπορεί να αλλάξει μόνο από αυτό το νήμα.
  2. Shadow Thread - Αυτό το νήμα είναι το νήμα φόντου που χρησιμοποιείται από το React Native για τον υπολογισμό της διάταξής σας που δημιουργήθηκε χρησιμοποιώντας τη βιβλιοθήκη React.
  3. Νήμα JavaScript - Αυτό το νήμα είναι το μέρος όπου ζει και εκτελείται ο κώδικας JavaScript (ο κώδικας React σας, ουσιαστικά).

Οι εσωτερικές λειτουργίες…

Ας ξεκινήσουμε από την αρχή. Ας υποθέσουμε ότι θέλετε να σχεδιάσετε ένα κόκκινο κουτί στο κέντρο της οθόνης σας. Αυτό που συμβαίνει είναι ότι το νήμα JS περιέχει κώδικα για τη δημιουργία μιας διάταξης, δηλαδή αυτό το κόκκινο κουτί στην οθόνη. Ακολουθεί ένα τυπικό απόσπασμα κώδικα που μπορεί να το επιτύχει για το React Native (RN):

Το λειτουργικό σύστημα κεντρικού υπολογιστή έχει τη δική του εφαρμογή διάταξης και δεν ακολουθεί το είδος του κώδικα flexbox που μόλις γράψατε. Επομένως, το RN πρώτα απ 'όλα πρέπει να μετατρέψει την κωδικοποιημένη διάταξη flexbox σε σύστημα διάταξης το οποίο μπορεί να κατανοήσει το λειτουργικό σύστημα του κεντρικού υπολογιστή σας.

Περίμενε! Πριν το κάνουμε αυτό, πρέπει να ξεφορτώσουμε αυτό το μέρος υπολογισμού διάταξης σε άλλο νήμα, ώστε να συνεχίσουμε να εκτελούμε το νήμα JavaScript. Ως εκ τούτου, το RN χρησιμοποιεί το Shadow Thread που κατασκευάζει ουσιαστικά ένα δέντρο της διάταξής σας που κωδικοποιήσατε στο νήμα JS σας. Σε αυτό το νήμα, το RN χρησιμοποιεί μια μηχανή διάταξης που ονομάζεται Yoga, η οποία μετατρέπει τη διάταξη που βασίζεται σε flexbox σε ένα σύστημα διάταξης το οποίο μπορεί να κατανοήσει ο εγγενής κεντρικός υπολογιστής.

Το React Native χρησιμοποιεί κάτι που ονομάζεται γέφυρα React Native για να κοινοποιήσει αυτές τις πληροφορίες από το νήμα JS στο νήμα Shadow. Με λίγα λόγια, αυτό απλώς σειριοποιεί τα δεδομένα σε μορφή JSON και τα μεταφέρει ως συμβολοσειρά πάνω από τη γέφυρα.

Σε αυτό το σημείο, είμαστε στο νήμα Shadow. Το νήμα JS εκτελείται και δεν υπάρχει τίποτα στην οθόνη.

Τώρα, μόλις λάβουμε τη σήμανση από τη γιόγκα, αυτές οι πληροφορίες μεταφέρονται ξανά στο νήμα UI μέσω της γέφυρας React Native. Και πάλι, αυτό κάνει κάποια σειριοποίηση στο νήμα Shadow και αποεριοποίηση στο κύριο νήμα. Εδώ, το κύριο νήμα αποδίδει το UI.

Προβλήματα με αυτήν την προσέγγιση

Αν δείτε, όλη η επικοινωνία μεταξύ των νημάτων γίνεται μέσω μιας γέφυρας που λειτουργεί, αλλά είναι γεμάτη από περιορισμούς. Αυτά περιλαμβάνουν:

  • είναι αργή η μεταφορά μεγάλων κομματιών δεδομένων (ας πούμε ένα αρχείο εικόνας που μετατρέπεται σε συμβολοσειρά base64) και
  • υπάρχει περιττή αντιγραφή δεδομένων εάν η ίδια εργασία μπορεί να εφαρμοστεί απλά δείχνοντας τα δεδομένα στη μνήμη (και πάλι, ας πούμε μια εικόνα)

Στη συνέχεια, όλη η επικοινωνία είναι ασύγχρονη, η οποία στις περισσότερες περιπτώσεις είναι καλή. Ωστόσο, προς το παρόν δεν υπάρχει τρόπος να ενημερώσετε το νήμα UI από το νήμα JS ταυτόχρονα. Αυτό δημιουργεί ένα πρόβλημα όταν χρησιμοποιείτε, ας πούμε, FlatList με μια τεράστια λίστα δεδομένων. (Μπορείτε να σκεφτείτε το FlatList ως μια πιο αδύναμη εφαρμογή του RecyclerView.)

Τέλος, λόγω αυτής της ασύγχρονης φύσης επικοινωνίας μεταξύ του νήματος JS και του νήματος UI, οι εγγενείς λειτουργικές μονάδες που απαιτούν αυστηρά πρόσβαση συγχρονισμένων δεδομένων δεν μπορούν να χρησιμοποιηθούν σε πλήρη έκταση. Για παράδειγμα, ο προσαρμογέας RecyclerView στο Android απαιτεί σύγχρονη πρόσβαση στα δεδομένα που αποδίδει για να μην έχει τρεμοπαίζει στην οθόνη. Αυτό δεν είναι δυνατό αυτήν τη στιγμή λόγω της ρύθμισης αρχιτεκτονικής πολλαπλών νημάτων από το React Native.

Παρουσιάζοντας το ύφασμα

Κάντε ένα βήμα πίσω και σκεφτείτε το πρόγραμμα περιήγησής σας. Εάν ρίξετε μια πιο βαθιά ματιά, τα πεδία εισαγωγής, τα κουμπιά κ.λπ. είναι συγκεκριμένα για το λειτουργικό σύστημα. Επομένως, είναι το πρόγραμμα περιήγησής σας που ζητά από το λειτουργικό σας σύστημα (Windows, Mac, Linux ή σχεδόν οτιδήποτε άλλο) να σχεδιάσετε, για παράδειγμα, ένα πεδίο εισαγωγής κάπου σε μια ιστοσελίδα. Ιερό μουλάι! Δείτε την όμορφη χαρτογράφηση από προγράμματα περιήγησης στο React Native.

  • Νήμα UI → Νήμα UI
  • Μηχανή απόδοσης προγράμματος περιήγησης → React Native rendering engine (Yoga / Shadow thread)
  • Νήμα JavaScript → Νήμα JavaScript

Γνωρίζουμε ότι τα σύγχρονα προγράμματα περιήγησης είναι πολύ ώριμα και χειρίζονται όλες αυτές τις εργασίες αποτελεσματικά. Γιατί λοιπόν να μην αντιδράσετε εγγενείς; Ποιο είναι το λείπει κομμάτι του παζλ που περιορίζει βάναυσα το React Native αλλά όχι τα προγράμματα περιήγησης;

Έκθεση εγγενών κλήσεων API απευθείας σε JavaScript

Έχετε γράψει ποτέ εντολές όπως document.getElementByIdκαι εντολές όπως setTimeoutκαι setIntervalστην κονσόλα σας και έχετε δει την έξοδο; Ω! Η εφαρμογή τους είναι στην πραγματικότητα [native code]! Τι σημαίνει αυτό?

Βλέπετε, όταν εκτελείτε αυτές τις λειτουργίες, δεν καλούν κανένα κώδικα JavaScript. Αντ 'αυτού, αυτές οι συναρτήσεις συνδέονται απευθείας με τον εγγενή κώδικα C ++ που καλείται. Έτσι, το πρόγραμμα περιήγησης δεν επιτρέπει στο JS να επικοινωνεί με το κεντρικό λειτουργικό σύστημα χρησιμοποιώντας γέφυρα, αλλά αντ 'αυτού, εκθέτει απευθείας το JS στο λειτουργικό σύστημα χρησιμοποιώντας εγγενή κώδικα! Με λίγα λόγια, αυτό θα έκανε το React Native Fabric: εξαλείψτε τη γέφυρα και αφήστε το UI να ελεγχθεί απευθείας από το νήμα JS χρησιμοποιώντας εγγενή κώδικα.

Διακοπές

  1. Το RN Fabric επιτρέπει στο νήμα UI (όπου σχεδιάζεται το UI) να είναι συγχρονισμένο με το νήμα JS (όπου είναι προγραμματισμένο το UI)
  2. Το Fabric είναι ακόμη υπό ανάπτυξη και η ομάδα του React Native δεν ανέφερε ημερομηνία δημοσίευσης από τώρα. Αλλά είμαι πολύ σίγουρος ότι θα δούμε κάτι φοβερό φέτος.
  3. Τα πλαίσια για την ανάπτυξη εφαρμογών όπως αυτά (RN, NativeScript, Flutter) γίνονται καλύτερα μέρα με τη μέρα!

Πηγές εικόνας: //www.slideshare.net/axemclion/react-native-fabric-review20180725

TL; Δρ

Σας άρεσε αυτό το άρθρο;

Αν σας άρεσε αυτό το άρθρο, μη διστάσετε να μου δώσετε χειροκροτήματα και να συνδεθείτε μαζί μου στο twitter. Ξέρεις το καλύτερο μέρος; Τα χτυπήματα και το twitter είναι δωρεάν! Εάν έχετε οποιεσδήποτε ερωτήσεις, μη διστάσετε να τις προσθέσετε στα σχόλια!

Γρήγορη βύσμα ξεδιάντροπη: Αν ξεκινήσατε με React Native, εδώ είναι το 95% μου από την πορεία για το πώς να ξεκινήσετε με αυτό: Αντιδρούν Native - Τα Πρώτα Βήματα