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

Πώς να κάνετε αναβάθμιση σε React 18

Για να εγκαταστήσετε την πιο πρόσφατη έκδοση του React εκτελέστε αυτήν την εντολή σε ένα τερματικό:

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

Ή εάν χρησιμοποιείτε νήμα:

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

Αφού εγκαταστήσετε την πιο πρόσφατη έκδοση, μπορείτε να αρχίσετε να εκμεταλλεύεστε τις νέες δυνατότητες της.

Υπάρχουν αρκετές προσθήκες στο React 18. Εδώ είναι τέσσερα από τα πιο αξιοσημείωτα.

1. Αυστηρή λειτουργία

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

instagram viewer

Μπορείτε να ενεργοποιήσετε την αυστηρή λειτουργία για οποιοδήποτε μέρος της εφαρμογής σας. Για παράδειγμα, θα μπορούσατε να το ενεργοποιήσετε για όλα τα στοιχεία σας ή μόνο για ορισμένα από αυτά.

εισαγωγή Αντιδρώ από 'αντιδρώ';
λειτουργίαΠαράδειγμα επίδειξης() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<FirstComponent />
<Αντιδρώ. StrictMode>
<ΔεύτεροΣυστατικό />
<ΤρίτοΣυστατικό />
</React.StrictMode>
<ΤέταρτοΣυστατικό />
</div>
 );
}

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

Το StrictMode βοηθά επίσης με άλλους τρόπους, όπως:

  • Προσδιορισμός εξαρτημάτων με μη ασφαλή κύκλο ζωής: Εάν ένα στοιχείο έχει μια μέθοδο κύκλου ζωής που έχει επισημανθεί ως μη ασφαλής, η αυστηρή λειτουργία θα σας προειδοποιήσει σχετικά.
  • Προειδοποίηση σχετικά με τη χρήση του API παλαιού τύπου string ref: Εάν χρησιμοποιείτε το παλαιού τύπου API ref string, η αυστηρή λειτουργία θα σας προειδοποιήσει για τη χρήση του.
  • Προειδοποίηση σχετικά με την καταργημένη χρήση findDOMNode: Εάν χρησιμοποιείτε το καταργημένο findDOMNode API, η αυστηρή λειτουργία θα σας προειδοποιήσει σχετικά.
  • Ανίχνευση απροσδόκητων παρενεργειών: Εάν ένα στοιχείο προκαλεί παρενέργειες (όπως το setState) σε μη αναμενόμενα σημεία, η αυστηρή λειτουργία θα σας προειδοποιήσει σχετικά.
  • Ανίχνευση API περιβάλλοντος παλαιού τύπου: Εάν χρησιμοποιείτε το API περιβάλλοντος παλαιού τύπου (το οποίο έχει πλέον καταργηθεί), η αυστηρή λειτουργία θα σας προειδοποιήσει σχετικά.
  • Διασφάλιση επαναχρησιμοποιήσιμης κατάστασης: Εάν έχετε μια κατάσταση που χρησιμοποιείται από πολλά στοιχεία, η αυστηρή λειτουργία θα σας βοηθήσει να διασφαλίσετε ότι είναι σωστά συγχρονισμένος.

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

2. Μεταβάσεις

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

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

Μπορείτε να χρησιμοποιήσετε τη συνάρτηση startTransition για να επισημάνετε μια ενημέρωση διεπαφής χρήστη ως μετάβαση. Εδώ είναι ένα παράδειγμα:

εισαγωγή { startTransition } από 'αντιδρώ';
startTransition(() => {
// Επισημάνετε τυχόν μη επείγουσες ενημερώσεις κατάστασης στο εσωτερικό ως μεταβάσεις
});

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

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

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

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

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

4. Νέοι γάντζοι

Η έκδοση 18 παρουσιάζει πολλά νέα React hooks, συμπεριλαμβανομένων των useId, useTransition και useDeferredValue. Αυτά τα νέα Hook παρέχουν έναν εξαιρετικό τρόπο για να προσθέσετε επιπλέον λειτουργικότητα στις εφαρμογές σας React με ελάχιστη προσπάθεια.

Το React 18 προσφέρει αυξημένη απόδοση εφαρμογής

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