Τι νέο υπάρχει στο React 18: Βασικές λειτουργίες που πρέπει να δοκιμάσετε

Το React είναι μια πολύ δημοφιλής βιβλιοθήκη JavaScript ανοιχτού κώδικα που δημιουργήθηκε από το Facebook το 2013. Λόγω της ευελιξίας του, πολλοί προγραμματιστές αξιοποιούν ορισμένες από τις δυνατότητες του για τη δημιουργία γρήγορων, αποτελεσματικών και επαναχρησιμοποιήσιμων στοιχείων διεπαφής χρήστη (UI).

Τον Μάρτιο του 2022, η ομάδα κυκλοφόρησε την πιο πρόσφατη και αναμενόμενη έκδοση της βιβλιοθήκης React, το React 18, η οποία περιλαμβάνει νέες δυνατότητες που επικεντρώνονται στη βελτίωση της απόδοσης της εφαρμογής.

Οι νέες δυνατότητες στο React 18

Το React 18 αποτελείται από μερικές χρήσιμες νέες δυνατότητες που προστέθηκαν στο βιβλιοθήκη JavaScript ανοιχτού κώδικα. Πολλές από αυτές τις αλλαγές δεν ήταν στην προηγούμενη έκδοση, ενώ άλλα χαρακτηριστικά βελτιώθηκαν. Μερικά από αυτά τα χαρακτηριστικά περιλαμβάνουν: ένα νέο root API, Automatic Batching, Transition API, Suspense API και την κυκλοφορία νέων Hooks.

Νέο Root API

Το ριζικό API στο React παρακολουθεί τον τρόπο απόδοσης του στοιχείου ανώτατου επιπέδου στο δέντρο. Στις προηγούμενες εκδόσεις του React, το καθιστώ Η μέθοδος χρησιμοποιήθηκε για την εκτέλεση της απόδοσης που τώρα ονομάζεται API ρίζας παλαιού τύπου.

Ωστόσο, το React 18 συνοδεύεται από ένα νέο API ρίζας που δημιουργεί μια ρίζα χρησιμοποιώντας το createRoot μέθοδο και στη συνέχεια αποδίδει ένα στοιχείο React στη ρίζα που δημιουργήθηκε χρησιμοποιώντας το καθιστώ μέθοδος.

Αυτό το νέο ριζικό API θα σας δώσει πρόσβαση στις δυνατότητες αυτής της πρόσφατης έκδοσης, όπως η δυνατότητα μετάβασης API που συζητήθηκε αργότερα. Ενώ ο παλιός τρόπος θα εξακολουθεί να λειτουργεί στο React 18, ενδέχεται να καταργηθεί σταδιακά στο μέλλον.

Το παρακάτω απόσπασμα δείχνει πώς είναι δομημένο το ριζικό API τόσο με παλαιού τύπου όσο και με νέους τρόπους.

Legacy Root API

εισαγωγή ReactDOM από'react-dom';
εισαγωγή App από'./Εφαρμογή';
ReactDOM.render(<App />, έγγραφο.getElementById('εφαρμογή'))

Νέο Root API

εισαγωγή ReactDOM από'react-dom/client';
εισαγωγή App από'./Εφαρμογή';
συνθ root = ReactDOM.createRoot(έγγραφο.getElementById('εφαρμογή'));
root.render(<App />)

Αυτόματη παρτίδα

Η ομαδοποίηση στο React περιλαμβάνει πολλαπλές ενημερώσεις κατάστασης σε μια ενιαία αναπαράσταση σε κάθε συμβάν του προγράμματος περιήγησης, για παράδειγμα α κλικ συμβάν. Τυχόν αλλαγές κατάστασης που συνέβησαν εκτός ενός συμβάντος, όπως μια υπόσχεση ή μια επιστροφή κλήσης, δεν θα ομαδοποιηθούν.

Με το React 18, οι ομαδικές ενημερώσεις κατάστασης γίνονται αυτόματα ανεξάρτητα από το πού γίνονται αυτές οι ενημερώσεις. Αυτή η δυνατότητα παρέχει εκ των υστέρων βελτίωση της απόδοσης και του χρόνου απόδοσης. Ωστόσο, εάν έχετε μια κατάσταση στοιχείου που δεν θέλετε να γίνει παρτίδα, μπορείτε να εξαιρεθείτε από αυτήν χρησιμοποιώντας το flushSync μέθοδος. Παρακάτω είναι ένα δείγμα απόσπασμα για το πώς μπορεί να γίνει.

εισαγωγή { flushSync } από'react-dom';
λειτουργίαhandleClick() {
 flushSync(() => {
 setCount(μετρώ => μετρώ + 1);
]});
 flushSync(() => {
 setStore(κατάστημα => !κατάστημα);
});
}

API μετάβασης

Στο React, οι ενημερώσεις που γίνονται στη διεπαφή χρήστη μπορούν να κατηγοριοποιηθούν ως επείγουσες και οι ενημερώσεις μετάβασης ονομάζονται επίσης μη επείγουσες. Ένα παράδειγμα επείγουσας ενημέρωσης μπορεί να είναι μια περίπτωση εισαγωγής κειμένου σε ένα πεδίο, ενώ αυτό μιας ενημέρωσης μετάβασης θα μπορούσε να είναι μια λειτουργία φιλτραρίσματος αναζήτησης.

Τώρα, εάν τέτοιες ενημερώσεις πραγματοποιηθούν ταυτόχρονα, αυτό θα μπορούσε να ονομαστεί βαριά λειτουργία και θα μπορούσε να οδηγήσει στο πάγωμα της εφαρμογής σας. Για να λυθεί αυτό το πρόβλημα, αυτό είναι όπου το API μετάβασης κάλεσε το startTransition έρχεται να παίξει. Αυτή η νέα δυνατότητα λέει στο React ποιες ενημερώσεις πρέπει να επισημαίνονται ως "μεταβάσεις", βελτιώνοντας με τη σειρά της τις αλληλεπιδράσεις των χρηστών. Εδώ είναι ένα δείγμα κώδικα του πώς λειτουργεί.

εισαγωγή { startTransition } από"αντιδρώ";
startTransition(() => {
 setSearch (εισαγωγή);
});

Αγωνία

Όταν μια εφαρμογή αποδίδεται στον διακομιστή, ένα στατικό αρχείο HTML επιστρέφεται στο πρόγραμμα περιήγησης που επιτρέπει στον χρήστη να δει πώς φαίνεται η εφαρμογή κατά τη φόρτωση του JavaScript. Όταν φορτώνεται το αρχείο, το HTML γίνεται δυναμικό με αυτό που είναι γνωστό ως ενυδάτωση. Το έλλειμμα εδώ είναι ότι εάν δεν υπάρχουν όλα αυτά, η εφαρμογή σας δεν θα γίνει διαδραστική.

Για την επίλυση αυτού του προβλήματος, το React 18 παρέχει δύο νέες δυνατότητες απόδοσης από την πλευρά του διακομιστή (SSR) χρησιμοποιώντας το Αγωνία συστατικό;

• Η ροή HTML επιτρέπει την αποστολή τμημάτων ενός στοιχείου καθώς αποδίδονται.
• Η επιλεκτική ενυδάτωση δίνει προτεραιότητα στη διαδραστικότητα των εξαρτημάτων που επιλέγονται από έναν χρήστη.

Νέοι γάντζοι

Ένα μεγάλο σημείο καμπής για το React ήταν η εισαγωγή του αγκίστρια στο React έκδοση 16 που επιτρέπει στα στοιχεία συνάρτησης να έχουν πρόσβαση σε καταστάσεις και άλλες δυνατότητες του React χωρίς να γράφουν κλάσεις. Το React 18 συνοδεύεται από πέντε νέα άγκιστρα για καλύτερη εμπειρία των προγραμματιστών.

• useId: Αυτό το άγκιστρο μας επιτρέπει να δημιουργήσουμε ένα μοναδικό αναγνωριστικό (ID) στην εφαρμογή μας τόσο στον διακομιστή όσο και στον πελάτη.
• useTransition: Χρησιμοποιείται παράλληλα startTransition για να δημιουργήσετε μια νέα ενημέρωση κατάστασης που μπορεί να χαρακτηριστεί ως μη επείγουσα.
• useDefferedValue: Επιτρέπει την αναβολή ενημερώσεων που είναι λιγότερο επείγουσες.
• useSyncExternalStore: Αυτό το άγκιστρο είναι χρήσιμο κατά την υλοποίηση συνδρομών σε εξωτερικές πηγές δεδομένων.
• useInsertionEffect: Αυτό το άγκιστρο περιορίζεται σε συντάκτες βιβλιοθήκης CSS-in-JS για την εισαγωγή στυλ στο DOM.

Πώς να ενημερώσετε το React 18

Για να εκτελέσετε μια ενημέρωση, ο διαχειριστής πακέτων npm ή νήμα μπορεί να χρησιμοποιηθεί εκτελώντας την ακόλουθη εντολή στο τερματικό.

npm εγκαθιστώ αντιδρώ react-dom

ή

νήμα προσθήκη react react-dom 

Στη συνέχεια, θα πρέπει να κάνετε μια αλλαγή στο index.js αρχείο στον ριζικό κατάλογο του φακέλου του έργου από το παλαιού τύπου API στο νέο ριζικό API όπως φαίνεται νωρίτερα.

Πώς να ρυθμίσετε ένα νέο έργο React 18

Για να ρυθμίσετε ένα νέο έργο React 18, το πακέτο δημιουργίας-react-app εγκαθίσταται με npm ή νήμα στο τερματικό.

npx δημιουργώ-react-app my-react-app

ή

νήμα προσθήκη δημιουργώ-react-app my-react-app

Βελτιώστε την απόδοση της εφαρμογής σας με το React 18

Τώρα ξέρετε για ορισμένες νέες δυνατότητες στο React 18, όπως το νέο root API, το Suspense, το Transition ή το Automatic Batching, και πώς να κάνετε αναβάθμιση σε αυτήν τη νέα έκδοση και να τη ρυθμίσετε από την αρχή.

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