Γιατί τα στοιχεία λίστας χρειάζονται ένα κλειδί και γιατί να μη χρησιμοποιήσετε τον δείκτη;

Question

IT Interview Practice · Accepted Answer

Όταν κάνετε render μια λίστα, το React χρειάζεται ένα τρόπο να γνωρίζει **ποιο στοιχείο είναι ποιο** μεταξύ των renders, ώστε να μπορεί να επαναχρησιμοποιήσει, να αναδιατάξει, να εισαγάγει ή να διαγράψει σωστά τους κόμβους DOM. Το **`key`** είναι αυτή η ταυτότητα. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Γιατί το index του πίνακα είναι επικίνδυνο Η χρήση του δείκτη ως κλειδί λέει στο React "το στοιχείο στη θέση 0 είναι το ίδιο στοιχείο με πριν" — που σπάει τη στιγμή που η λίστα αναδιατάσσεται ή εισάγετε/διαγράφετε από το μπροστά: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` Ενα πραγματικό σύμπτωμα: μια λίστα εισαγωγών όπου η πληκτρολόγηση σε μια σειρά "πηδά" σε άλλη μετά τη διαγραφή/ταξινόμηση, επειδή το React επαναχρησιμοποίησε το λάθος `` (και την εσωτερική του τιμή/εστίαση). ## Κανόνες - Χρησιμοποιήστε ένα **σταθερό, μοναδικό** id από τα δεδομένα σας (`user.id`, ένα slug). - Ο δείκτης είναι αποδεκτός **μόνο** για μια στατική λίστα που δεν αναδιατάσσεται, δεν εισάγει ή διαγράφει ποτέ. - Τα κλειδιά πρέπει να είναι μοναδικά μεταξύ **αδελφών** (όχι παγκοσμίως). Τα κλειδιά είναι μια υπόδειξη για τον αλγόριθμο συμφιλίωσης. η σωστή τους λήψη κρατά τόσο την απόδοση όσο και την κατάσταση του συστατικού σωστή.

Γιατί το index του πίνακα είναι επικίνδυνο

Κανόνες

Σχετικές ερωτήσεις