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

Μεταξύ των νέων δυνατοτήτων είναι πέντε hook: useId, useTransition, useDerredValue, useSyncExternalStore και useInsertionEffect.

React useTransition Hook

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

Το στοιχείο Αναζήτηση σελίδας

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

instagram viewer 
εισαγωγή { useState } από "αντιδρώ";
λειτουργίαΑναζήτηση Σελίδα() {
 const [input, setInput] = useState("")
συνθ [λίστα, setList] = useState([]);
συνθ listSize = 30000


λειτουργίαλαβήΑλλαγή(μι) {
setInput(μι.στόχος.αξία);
συνθ listItems = [];


Για (αφήνω i = 0; i < listSize; i++){
στοιχεία λίστας.Σπρώξτε(μι.στόχος.αξία);
 }


setList (listItems);
 }


ΕΠΙΣΤΡΟΦΗ (
<div>
<επιγραφή>Αναζήτηση στον Ιστό: </label>
<τύπος εισόδου="κείμενο" value={input} onChange={handleChange} />
{λίστα.map((στοιχείο, ευρετήριο) => {
 ΕΠΙΣΤΡΟΦΗ <κλειδί div={index}>{είδος}</div>
 })}
</div>
 );
}
εξαγωγήΠροκαθορισμένο Αναζήτηση Σελίδα;

Το ενημερωμένο στοιχείο εφαρμογής

εισαγωγή Αναζήτηση Σελίδα από "./Components/SearchPage";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div>
< Αναζήτηση Σελίδα/>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ο παραπάνω κώδικας αποδίδει μια εφαρμογή React με ένα πεδίο εισαγωγής:

Καθώς αρχίζετε να πληκτρολογείτε χαρακτήρες στο πεδίο, 30.000 αντίγραφα του πληκτρολογημένου κειμένου θα εμφανιστούν παρακάτω:

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

Εάν η επίδειξη εκτελείται πολύ αργά ή πολύ γρήγορα για εσάς, δοκιμάστε να το τροποποιήσετε Μέγεθος λίστας αξία αναλόγως.

Η εισαγωγή του γάντζου useTransition στην εφαρμογή θα σας επιτρέψει να δώσετε προτεραιότητα στη μία ενημέρωση κατάστασης έναντι της άλλης.

Χρησιμοποιώντας το useTransition Hook

εισαγωγή {useState, useTransition} από "αντιδρώ";
λειτουργίαΑναζήτηση Σελίδα() {
συνθ [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
συνθ [λίστα, setList] = useState([]);


συνθ listSize = 30000


λειτουργίαλαβήΑλλαγή(μι) {
setInput(μι.στόχος.αξία);
 startTransition(() => {
συνθ listItems = [];


Για (αφήνω i = 0; i < listSize; i++){
στοιχεία λίστας.Σπρώξτε(μι.στόχος.αξία);
 }


setList (listItems);
 });
 }


ΕΠΙΣΤΡΟΦΗ (
<div>
<επιγραφή>Αναζήτηση στον Ιστό: </label>
<τύπος εισόδου="κείμενο" value={input} onChange={handleChange} />


{εκκρεμεί? "...Φόρτωση αποτελεσμάτων": list.map((στοιχείο, ευρετήριο) => {
 ΕΠΙΣΤΡΟΦΗ <κλειδί div={index}>{είδος}</div>
 })}
</div>
 );
}
εξαγωγήΠροκαθορισμένο Αναζήτηση Σελίδα;

Ενημέρωση σας Αναζήτηση Σελίδα Το στοιχείο με τον παραπάνω κώδικα θα δώσει προτεραιότητα στο πεδίο εισαγωγής έναντι της "περιοχής αποτελεσμάτων αναζήτησης". Αυτή η απλή αλλαγή έχει ένα σαφές αποτέλεσμα: θα πρέπει να αρχίσετε να βλέπετε αμέσως το κείμενο που πληκτρολογείτε στο πεδίο εισαγωγής. Μόνο η "περιοχή αποτελεσμάτων αναζήτησης" θα εξακολουθεί να έχει μια μικρή καθυστέρηση. Αυτό οφείλεται στο startTransitionδιεπαφή προγραμματισμού εφαρμογών (API) από το άγκιστρο useTransition.

Ο κώδικας που αποδίδει τα αποτελέσματα αναζήτησης στη διεπαφή χρήστη χρησιμοποιεί τώρα το startTransition API. Αυτό επιτρέπει στο πεδίο εισαγωγής να διακόπτει την ενημέρωση κατάστασης των αποτελεσμάτων αναζήτησης. Οταν ο εκκρεμεί() Η συνάρτηση εμφανίζει «…Φόρτωση αποτελέσματος» υποδηλώνει ότι συμβαίνει μια μετάβαση (από τη μια κατάσταση στην επόμενη).

React useDeferredValue Hook

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

Το στοιχείο SearchPage με το άγκιστρο useDeferredValue().

εισαγωγή { useState, useTransition, useDeferredValue } από "αντιδρώ";
λειτουργίαΑναζήτηση Σελίδα() {


συνθ [,startTransition] = useTransition();
 const [input, setInput] = useState("")
συνθ [λίστα, setList] = useState([]);


συνθ listSize = 30000


λειτουργίαλαβήΑλλαγή(μι) {
setInput(μι.στόχος.αξία);
 startTransition(() => {
συνθ listItems = [];


Για (αφήνω i = 0; i < listSize; i++){
στοιχεία λίστας.Σπρώξτε(μι.στόχος.αξία);
 }


setList (listItems);
 });
 }
συνθ deferredValue = useDeferredValue (εισαγωγή);
ΕΠΙΣΤΡΟΦΗ (
<div>
<επιγραφή>Αναζήτηση στον Ιστό: </label>
<τύπος εισόδου="κείμενο" value={input} onChange={handleChange} />


{λίστα.map((στοιχείο, ευρετήριο) => {
 ΕΠΙΣΤΡΟΦΗ <κλειδί div={index} input={deferredValue} >{είδος}</div>
 })}
</div>
 );
}
εξαγωγήΠροκαθορισμένο Αναζήτηση Σελίδα;

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

React useSyncExternalStore Hook

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

συνθ state = useSyncExternalStore (εγγραφή, getSnapshot[, getServerSnapshot]);

Αυτή η υπογραφή περιέχει τα ακόλουθα:

  • κατάσταση: η τιμή του χώρου αποθήκευσης δεδομένων που επιστρέφει το άγκιστρο useSyncExternalStore.
  • Εγγραφείτε: καταχωρεί μια επανάκληση όταν αλλάζει ο χώρος αποθήκευσης δεδομένων.
  • getSnapshot: επιστρέφει την τρέχουσα τιμή αποθήκευσης δεδομένων.
  • getServerSnapshot: επιστρέφει το στιγμιότυπο που χρησιμοποιήθηκε κατά την απόδοση του διακομιστή.

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

React useInsertionEffect Hook

Το άγκιστρο useInsertionEffect είναι ένα άλλο νέο άγκιστρο του React που λειτουργεί με βιβλιοθήκες. Ωστόσο, αντί για αποθήκευση δεδομένων, το άγκιστρο useInsertionEffect λειτουργεί με βιβλιοθήκες CSS-in-JS. Αυτό το άγκιστρο αντιμετωπίζει ζητήματα απόδοσης απόδοσης στυλ. Δίνει στυλ στο DOM πριν διαβάσει τη διάταξη στο άγκιστρο useLayoutEffect.

React useId Hook

Χρησιμοποιείτε το άγκιστρο useId σε καταστάσεις που απαιτούν μοναδικά αναγνωριστικά (εκτός από τα κλειδιά σε μια λίστα). Ο κύριος σκοπός του είναι να δημιουργήσει αναγνωριστικά που παραμένουν μοναδικά μεταξύ του πελάτη και του διακομιστή, αποφεύγοντας το σφάλμα ασυμφωνίας ενυδάτωσης διακομιστή React. Το άγκιστρο useId χρησιμοποιεί την ακόλουθη δήλωση:

συνθ id = useId()

Στη δήλωση ταυτότητα είναι μια μοναδική συμβολοσειρά που περιλαμβάνει το : κουπόνι. Μετά τη δήλωση, μπορείτε να περάσετε το ταυτότητα μεταβλητή απευθείας στο στοιχείο(α) που το χρειάζονται.

Τι αξία προσθέτουν αυτά τα νέα άγκιστρα στην αντίδραση;

Τα άγκιστρα useTransition και useDeferredValue είναι άγκιστρα κώδικα εφαρμογής. Μέσω της απόδοσης ταυτόχρονης βελτίωσης της απόδοσης των εφαρμογών. Το άγκιστρο useId αντιμετωπίζει το σφάλμα ασυμφωνίας ενυδάτωσης δημιουργώντας μοναδικά αναγνωριστικά μεταξύ πελατών και διακομιστή.

Τα άγκιστρα useSyncExternalStore και useInsertionEffect συνεργάζονται με εξωτερικές βιβλιοθήκες για να διευκολύνουν την ταυτόχρονη απόδοση. Το άγκιστρο useInsertionEffect λειτουργεί με βιβλιοθήκες CSS-in-JS. Το άγκιστρο useSyncExternalStore λειτουργεί με βιβλιοθήκες αποθήκευσης δεδομένων όπως το κατάστημα Redux.

Μαζί αυτά τα άγκιστρα δίνουν σημαντική ώθηση στην απόδοση, η οποία με τη σειρά της βελτιώνει την εμπειρία του χρήστη.