React Κλειδιά, ναι! Τα χρειάζεστε, αλλά γιατί ακριβώς;

Υπάρχει επίσης ένα ακόμη πράγμα που πρέπει να θυμάστε και αυτό είναι η React Κλειδί χαρακτηριστικό, κάθε στοιχείο της αποδιδόμενης λίστας πρέπει να το έχει. Αυτή η έννοια είναι ένα από τα πρώτα πράγματα που μαθαίνει κάθε προγραμματιστής front-end για το React στην αρχή του ταξιδιού τους. Τώρα ας ψάξουμε λίγο βαθύτερα για να διερευνήσουμε γιατί συμβαίνει αυτό και πότε μπορούμε να κάνουμε κάποιες συντομεύσεις.

Γιατί χρειαζόμαστε αυτό το βασικό χαρακτηριστικό;

Η απλούστερη απάντηση εδώ θα ήταν "για τη βελτιστοποίηση των επανεκτελέσεων", αλλά η πιο ολοκληρωμένη πρέπει τουλάχιστον να αναφέρει την έννοια της React Συμφιλίωση. Αυτή είναι η διαδικασία της εύρεσης του τρόπου ενημέρωσης του UI με τον πιο αποτελεσματικό τρόπο. Για να γίνει αυτό γρήγορα, React πρέπει να αποφασίσει ποια τμήματα του δέντρου των στοιχείων πρέπει να ενημερωθούν και ποια όχι. Το θέμα είναι ότι μπορεί να υπάρχουν πολλά στοιχεία στο DOM και η σύγκριση του καθενός από αυτά για να αποφασιστεί ποιο πρέπει να ενημερωθεί είναι αρκετά δαπανηρή. Για να το βελτιστοποιήσετε αυτό, React υλοποιεί τον αλγόριθμο diffing, ο οποίος βασίζεται σε δύο υποθέσεις:

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

Με βάση αυτό, μπορούμε να συμπεράνουμε ότι κάθε Κλειδί React θα πρέπει επίσης να είναι μοναδικό (εντός του καταλόγου των στοιχείων, όχι παγκοσμίως) και σταθερό (δεν θα πρέπει να αλλάζει). Αλλά τι μπορεί να συμβεί όταν δεν είναι ταυτοποιημένα;

Μοναδικότητα, σταθερότητα και δείκτης συστοιχίας

Όπως αναφέραμε προηγουμένως, Πλήκτρα React θα πρέπει να είναι σταθερό και μοναδικό. Ο ευκολότερος τρόπος για να το πετύχετε αυτό είναι να χρησιμοποιήσετε ένα μοναδικό αναγνωριστικό (για παράδειγμα από μια βάση δεδομένων) και να το περάσετε σε κάθε στοιχείο κατά την αντιστοίχιση ενός πίνακα, εύκολα. Τι γίνεται όμως με τις περιπτώσεις που δεν έχουμε ένα αναγνωριστικό, ένα όνομα ή άλλα μοναδικά αναγνωριστικά για να τα περάσουμε σε κάθε στοιχείο; Λοιπόν, αν δεν περάσουμε τίποτα ως κλειδί, React θα πάρει τον τρέχοντα δείκτη του πίνακα από προεπιλογή (αφού είναι μοναδικός μέσα στη λίστα) για να το χειριστεί για εμάς, αλλά θα μας δώσει επίσης ένα ωραίο μήνυμα σφάλματος στην κονσόλα:

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

Εξαιρέσεις

Ας επιστρέψουμε στον δείκτη του πίνακα. Αν το χρησιμοποιείτε ως Κλειδί React μπορεί να είναι τόσο προβληματική, γιατί React θα το χρησιμοποιεί από προεπιλογή; Υπάρχει κάποια περίπτωση χρήσης στην οποία είναι εντάξει να το κάνετε; Η απάντηση είναι ναι, η περίπτωση χρήσης είναι οι στατικές λίστες. Αν είστε σίγουροι ότι μια λίστα που αποδίδετε δεν θα αλλάξει ποτέ τη σειρά της, είναι ασφαλές να χρησιμοποιήσετε το array index, αλλά να θυμάστε, αν έχετε κάποια μοναδικά αναγνωριστικά, εξακολουθεί να είναι καλύτερο να τα χρησιμοποιήσετε αντί γι' αυτά. Μπορείτε επίσης να παρατηρήσετε ότι περνώντας δείκτες ως κλειδιά θα κάνει το React εξαφανίζεται το μήνυμα σφάλματος, ενώ ταυτόχρονα ενεργοποιεί ορισμένους από τους εξωτερικούς λιντέρ για να εμφανίσουν ένα σφάλμα ή μια προειδοποίηση. Αυτό οφείλεται στο γεγονός ότι η ρητή χρήση δεικτών ως κλειδιά θεωρείται κακή πρακτική και ορισμένοι λιντερς μπορεί να το αντιμετωπίσουν ως σφάλμα, ενώ React το θεωρεί ως μια κατάσταση "οι προγραμματιστές ξέρουν τι κάνουν" - οπότε μην το κάνετε αυτό αν δεν ξέρετε πραγματικά τι κάνετε. Μερικά παραδείγματα για το πότε μπορεί να είναι εντάξει η χρήση αυτής της εξαίρεσης θα ήταν ένα dropdown με μια στατική λίστα κουμπιών ή η εμφάνιση μιας λίστας στοιχείων με πληροφορίες για τη διεύθυνση της εταιρείας σας.

Μια εναλλακτική λύση σε ένα κλειδί με βάση το σύνολο δεδομένων

Ας υποθέσουμε ότι κανένα από τα παραπάνω δεν αποτελεί επιλογή για εμάς. Για παράδειγμα, πρέπει να εμφανίσουμε μια λίστα στοιχείων με βάση τον πίνακα συμβολοσειρών, η οποία μπορεί να είναι διπλή, αλλά μπορεί επίσης να είναι και αναδιατεταγμένη. Σε αυτή την περίπτωση, δεν μπορούμε να χρησιμοποιήσουμε καμία από τις συμβολοσειρές επειδή δεν είναι μοναδικές (αυτό μπορεί να προκαλέσει και κάποια μαγικά σφάλματα) και ο δείκτης του πίνακα δεν είναι αρκετά καλός επειδή θα αλλάξουμε τη σειρά των στοιχείων. Το τελευταίο πράγμα στο οποίο μπορούμε να βασιστούμε σε τέτοιες περιπτώσεις είναι η χρήση κάποιων εξωτερικών αναγνωριστικών. Θυμηθείτε ότι πρέπει να είναι σταθερό, οπότε δεν μπορούμε να χρησιμοποιήσουμε απλά την Math.random(). Υπάρχουν κάποια πακέτα NPM που μπορούμε να χρησιμοποιήσουμε σε τέτοιες περιπτώσεις, για παράδειγμα το "uuid" πακέτο. Τέτοια εργαλεία μπορούν να μας βοηθήσουν να διατηρήσουμε τα κλειδιά της λίστας μας σταθερά και μοναδικά, ακόμη και όταν δεν μπορούμε να βρούμε κατάλληλα αναγνωριστικά μέσα στο σύνολο των δεδομένων μας. Θα πρέπει να εξετάσουμε πρώτα τη χρήση του αναγνωριστικού της βάσης δεδομένων και του δείκτη συστοιχίας (αν είναι δυνατόν), για να ελαχιστοποιήσουμε τον αριθμό των πακέτων που χρησιμοποιούνται από το έργο.

Για να το ολοκληρώσουμε

• Κάθε στοιχείο της λίστας των React στοιχεία πρέπει να έχουν ένα μοναδικό, σταθερό χαρακτηριστικό κλειδί,
• Πλήκτρα React χρησιμοποιούνται για την επιτάχυνση της Διαδικασία συμφιλίωσης και να αποφεύγεται η περιττή αναδόμηση των στοιχείων στις λίστες,
• Η καλύτερη πηγή για τα κλειδιά είναι το μοναδικό αναγνωριστικό εισαγωγής δεδομένων (για παράδειγμα, από τη βάση δεδομένων),
• Μπορείτε να χρησιμοποιήσετε τον δείκτη του πίνακα ως κλειδί, αλλά μόνο για μια στατική λίστα της οποίας η σειρά δεν θα αλλάξει,
• Αν δεν υπάρχει άλλος τρόπος να αποκτήσετε σταθερά και μοναδικά κλειδιά, σκεφτείτε να χρησιμοποιήσετε κάποιους εξωτερικούς παρόχους αναγνωριστικών, για παράδειγμα το πακέτο "uuid".

Διαβάστε περισσότερα:

Γιατί θα πρέπει (πιθανώς) να χρησιμοποιήσετε την Typescript

Πώς να μην σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης;

Στρατηγικές άντλησης δεδομένων στο NextJS