Πώς να χρησιμοποιήσετε τα πλήκτρα React για να αποφύγετε τη σύγκρουση στοιχείων

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

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

Τα React Components δεν είναι πάντα ανεξάρτητα

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

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

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

Για να το αποδείξετε, πάρτε αυτό το παράδειγμα. Πρώτον, έχετε τα εξής Μετρητής συστατικό:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

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

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

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

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

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

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

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

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Εάν αυξήσετε τον μετρητή "Kingsley" και κάντε κλικ Ανταλαγή, η κατάσταση επαναφέρεται στο 0. Και πάλι, αυτό συμβαίνει επειδή η δομή των δύο δέντρων DOM είναι διαφορετική.

Οταν ο είναι ο Kingsley μεταβλητή είναι αληθής, η δομή θα είναι div >div > Μετρητής (ένα div που περιέχει ένα div, που περιέχει έναν μετρητή). Όταν αλλάζετε την κατάσταση μετρητή χρησιμοποιώντας το κουμπί, η δομή γίνεται div > Ενότητα > Μετρητής. Λόγω αυτής της ασυμφωνίας, το React θα αποδώσει αυτόματα έναν νέο μετρητή με κατάσταση επαναφοράς.

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

Χρήση πλήκτρων για απόδοση ενός νέου στοιχείου

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

Προσθέστε ένα κλειδί σε κάθε μετρητή, όπως αυτό:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Τώρα, όταν αυξήσετε τον μετρητή "Kingsley" και κάντε κλικ Ανταλαγή, Το React αποδίδει έναν νέο μετρητή και μηδενίζει την κατάσταση.

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

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

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

Μια άλλη σύνθετη περίπτωση χρήσης κλειδιού

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

Για να το δείξετε, τροποποιήστε το στοιχείο της εφαρμογής:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

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

Περισσότερες συμβουλές για τη βελτιστοποίηση των εφαρμογών React

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

Το καλύτερο μέρος είναι ότι μπορείτε να εφαρμόσετε τις περισσότερες από αυτές τις τεχνικές βελτιστοποίησης και με τις εφαρμογές React Native.