Γιατί οι λειτουργίες Arrow και bind στο React's Render είναι προβληματικές

(Συμβουλή: Κάνει θα πρέπει να κάνειComponentUpdate και PureComponent cranky)

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

Εδώ είναι ένα γρήγορο παράδειγμα.

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

Στη γραμμή 35, χρησιμοποιώ μια λειτουργία βέλους για να μεταφέρω μια τιμή στη συνάρτηση deleteUser. Αυτό είναι πρόβλημα.

Για να δείτε γιατί, ελέγξτε το User.js (κάντε κλικ στο εικονίδιο χάμπουργκερ πάνω αριστερά για να επιλέξετε διαφορετικά αρχεία στο παράδειγμα). Συνδέομαι στην κονσόλα κάθε φορά που καλείται η απόδοση. Έχω δηλώσει τον χρήστη ως PureComponent. Επομένως, ο Χρήστης θα πρέπει να αποδίδει ξανά μόνο όταν αλλάζουν στηρίγματα ή κατάσταση. Αλλά όταν κάνετε κλικ στη διαγραφή για έναν χρήστη, σημειώστε ότι η απόδοση απαιτείται για όλες τις παρουσίες χρήστη .

Να γιατί: Το γονικό στοιχείο μεταδίδει μια λειτουργία βέλους στα στηρίγματα. Οι λειτουργίες βέλους ανακατανέμονται σε κάθε απόδοση (ίδια ιστορία με χρήση bind). Έτσι, παρόλο που έχω δηλώσει το User.js ως PureComponent, η λειτουργία βέλους στο γονέα του χρήστη κάνει το στοιχείο χρήστη να βλέπει μια νέα συνάρτηση να αποστέλλεται σε υποστηρίγματα για όλους τους χρήστες. Έτσι, κάθε χρήστης εκδίδει ξανά όταν κάνετε κλικ σε οποιοδήποτε κουμπί διαγραφής. ;

Περίληψη:

Αποφύγετε τις λειτουργίες βέλους και τις συνδέσεις στην απόδοση. Διασπά τις βελτιστοποιήσεις απόδοσης, όπως seharusnyaComponentUpdate και PureComponent.

Τι πρέπει να κάνω;

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

Σε αυτό το παράδειγμα, το index.js δεν έχει λειτουργία βέλους στην απόδοση. Αντ 'αυτού, τα σχετικά δεδομένα μεταβιβάζονται στο User.js. Στο User.js, το onDeleteClick καλεί τη συνάρτηση onClick που μεταβιβάστηκε στα στηρίγματα με το σχετικό user.id.

Με αυτήν την αλλαγή, όταν κάνετε κλικ στη διαγραφή, παρατηρήστε ότι η απόδοση δεν απαιτείται για τους άλλους χρήστες! ;

Περίληψη

Για βέλτιστη απόδοση,

  1. Αποφύγετε τις λειτουργίες βέλους και συνδέστε την απόδοση.
  2. Πως? Εξαγάγετε θυγατρικά στοιχεία ή μεταβιβάστε δεδομένα στο στοιχείο HTML.

Ψάχνετε περισσότερα για το React; ⚛️

Έχω γράψει πολλά μαθήματα React και JavaScript στο Pluralsight (δωρεάν δοκιμή). Η τελευταία μου δημοσίευση "Δημιουργία επαναχρησιμοποιήσιμων στοιχείων αντιδράσεων" μόλις δημοσιεύτηκε! ;

Ο Cory House είναι ο συγγραφέας πολλών μαθημάτων σε JavaScript, React, clean code, .NET και πολλά άλλα στο Pluralsight. Είναι κύριος σύμβουλος στο reactjsconsulting.com, αρχιτέκτονας λογισμικού στο VinSolutions, Microsoft MVP και εκπαιδεύει προγραμματιστές λογισμικού διεθνώς για πρακτικές λογισμικού όπως η ανάπτυξη front-end και καθαρή κωδικοποίηση. Ο Cory κάνει tweets σχετικά με τη JavaScript και την ανάπτυξη front-end στο Twitter ως @housecor.