3 λάθη για αρχάριους που μπορούν να καταστρέψουν την εφαρμογή σας

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

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

1. Χρήση του λανθασμένου τύπου της λειτουργίας επανάκλησης

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

Εξετάστε το ακόλουθο στοιχείο, για παράδειγμα:

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
λειτουργίαhandleSubmit(μι) {
 e.preventDefault()
κονσόλα.κούτσουρο("Το έντυπο υποβλήθηκε!")
 }
λειτουργίαΤυπώνω(αριθμός) {
κονσόλα.κούτσουρο("Τυπώνω", αριθμός)
 }
λειτουργίαδιπλασιαστής(αριθμός) {
ΕΠΙΣΤΡΟΦΗ() => {
κονσόλα.κούτσουρο("Διπλό", αριθμός * 2)
 }
 }
ΕΠΙΣΤΡΟΦΗ (
 <>
 {/* Ο κωδικός θα πάει εδώ */}
 </>
 )
}

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

Τώρα, μεταβαίνοντας στο JSX, ας ξεκινήσουμε με τον πρώτο και πιο συνηθισμένο τρόπο με τον οποίο μεταβιβάζατε μια συνάρτηση ως χειριστής συμβάντων:

<μορφήonΥποβολή={handleSubmit}>
<εισαγωγήτύπος="κείμενο"όνομα="κείμενο"Προεπιλεγμένη τιμή="αρχικός"/>
<κουμπί>υποβάλλουνκουμπί>
μορφή>

Αυτό το παράδειγμα μεταβιβάζει το όνομα της συνάρτησης στο συμβάν μέσω της υποστήριξης onSubmit, επομένως το React καλεί το handleSubmit όταν υποβάλλετε τη φόρμα. Μέσα στο handleSubmit, μπορείτε να αποκτήσετε πρόσβαση στο αντικείμενο συμβάντος, το οποίο σας δίνει πρόσβαση σε ιδιότητες όπως συμβάν.στόχος.τιμή και μεθόδους όπως event.preventDefault().

Ο δεύτερος τρόπος για να μεταβιβάσετε μια συνάρτηση χειριστή συμβάντων είναι να την καλέσετε μέσα στη συνάρτηση επανάκλησης. Ουσιαστικά, μεταβιβάζετε onClick μια συνάρτηση που καλεί την print() για εσάς:

{[1, 5, 7].χάρτης((αριθμός) => {
ΕΠΙΣΤΡΟΦΗ (
 εκτύπωση (αριθμός)}>
 Εκτύπωση {αριθμός}
 </button>
 )
})}

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

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

λειτουργίαδιπλασιαστής(αριθμός) {
ΕΠΙΣΤΡΟΦΗ() => {
κονσόλα.κούτσουρο("Διπλό", αριθμός * 2)
 }
}

Τώρα, αν το χρησιμοποιήσατε στο JSX ως εξής:

{[1, 5, 7].χάρτης((αριθμός) => {
ΕΠΙΣΤΡΟΦΗ (
 διπλασιαστής (αριθμός)}>
 Διπλό {number}
 </button>
 )
})}

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

Και οι τρεις τεχνικές είναι έγκυρες επειδή, σε όλες τις περιπτώσεις, μεταβιβάζετε μια συνάρτηση στο συμβάν. Στο React, πρέπει να βεβαιωθείτε ότι μεταβιβάζετε μια συνάρτηση σε μια ιδιότητα συμβάντος. Θα μπορούσε να είναι μια μεταβλητή, μια συνάρτηση με σκληρό κώδικα (inline) ή ένα αντικείμενο/συνάρτηση που επιστρέφει μια άλλη συνάρτηση.

2. Έξοδος μηδέν κατά τη διάρκεια ψευδούς ελέγχου

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

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

Σκεφτείτε τον ακόλουθο κώδικα:

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ συστοιχία = [1, 2, 3, 4]
ΕΠΙΣΤΡΟΦΗ (


 {array.length && (


Πίνακας είδη:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

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

Ο λόγος για αυτό είναι αυτός συστοιχία.μήκος επιστρέφει μηδέν. Η τιμή μηδέν είναι ψευδής στο JavaScript. Και το πρόβλημα είναι ότι το JSX αποδίδει το μηδέν στην οθόνη. Άλλες ψευδείς τιμές όπως null, false και undefined δεν αποδίδονται. Αυτό μπορεί να οδηγήσει σε κακή εμπειρία χρήστη, επειδή το μηδέν θα εμφανίζεται πάντα στη σελίδα. Μερικές φορές το μηδέν μπορεί να είναι τόσο μικρό που δεν το προσέχεις καν.

Η λύση είναι να βεβαιωθείτε ότι επιστρέφετε μόνο είτε null, undefined ή false. Μπορείτε να το κάνετε αυτό ελέγχοντας ρητά το μηδέν στη συνθήκη αντί να βασίζεστε σε μια ψευδή τιμή:

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ συστοιχία = [1, 2, 3, 4]
ΕΠΙΣΤΡΟΦΗ (


 {array.length !== 0 && (


Πίνακας είδη:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Τώρα η τιμή μηδέν δεν θα εμφανίζεται στην οθόνη ακόμα και όταν ο πίνακας είναι άδειος.

3. Αποτυχία ενημέρωσης της κατάστασης σωστά

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

Αυτό το λάθος οφείλεται στο ότι δεν καταλαβαίνετε πώς να ενημερώσετε την κατάσταση όταν χρησιμοποιείτε την υπάρχουσα κατάσταση. Εξετάστε για παράδειγμα τον ακόλουθο κώδικα:

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ [array, setArray] = useState([1, 2, 3])
λειτουργίαaddNumberToStart() {
 array.unshift (αριθμός)
 setArray (πίνακας)
 }
λειτουργίαaddNumberToEnd() {
 array.unshift (αριθμός)
 setArray (πίνακας)
 }
ΕΠΙΣΤΡΟΦΗ (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
κονσόλα.log (πίνακας)
 }}
 >
 Προσθήκη 0 για Έναρξη/Τέλος
 </button>
 </>
 )
}

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

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

Η λύση είναι να αποκτήσετε πρόσβαση στην τρέχουσα κατάσταση (currentArray), να δημιουργήσετε ένα αντίγραφο αυτής της κατάστασης και να κάνετε τις ενημερώσεις σας σε αυτό το αντίγραφο:

λειτουργίαaddNumberToStart(αριθμός) {
 setArray((τρέχοντος πίνακας) => {
ΕΠΙΣΤΡΟΦΗ [αριθμός, ...currentArray]
 })
}
λειτουργίαaddNumberToStart(αριθμός) {
 setArray((τρέχοντος πίνακας) => {
ΕΠΙΣΤΡΟΦΗ [...currentArray, αριθμός]
 })
}

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

Άλλες σημαντικές έννοιες JavaScript για το React

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