Μια γρήγορη εισαγωγή στο setState στο React.js

Πώς να χρησιμοποιήσετε αποτελεσματικά το setState και ποιες παγίδες πρέπει να αποφύγετε

TL; DR - Σε περίπτωση που είστε οπτικός μαθητής, κατευθυνθείτε προς το βίντεο που έκανα: ReactJS - Πώς λειτουργεί το setState

Ή παρακολουθήστε το εδώ:

Μια εισαγωγή στο setState

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

Υπάρχουν δύο παραλλαγές της χρήσης του setState: η προσέγγιση βάσει αντικειμένων και η λειτουργική προσέγγιση.

Ας δούμε και τα δύο σε δράση. Θα κατανοήσουμε το πρόβλημα με το setState βάσει αντικειμένων στη διαδικασία.

Ας δημιουργήσουμε μια απλή εφαρμογή.

class App extends React.Component { constructor() { super(); this.state = { value: 0, message: 'default click state' } } onClick = () => { this.setState({ value: this.state.value + 1 }); this.setState({ message: `click-state ${this.state.value}` }); } render(){ return( render->state={this.state.value} - {this.state.message} Click-setState ); }}

Τώρα θα προσαρτήσουμε αυτήν την εφαρμογή στον ριζικό κόμβο DOM.

ReactDOM.render( , document.getElementById("root"));

Ο παραπάνω κώδικας, όταν εκτελείται, αποδίδει την τιμή και το μήνυμα από το αντικείμενο κατάστασης και δίνει επίσης ένα κουμπί.

Εάν ρίξετε μια ματιά στο πρόγραμμα χειρισμού κλικ, έχουμε δύο διαδοχικές συναρτήσεις setState που έχουν πρόσβαση στην τιμή this.state.

Η συμπεριφορά που περιμένουμε είναι ότι όταν κάνετε κλικ στο κουμπί, η σωστή τιμή κατάστασης πρέπει να αποδίδεται στο παρακάτω div (εξάγεται για αναφορά):

 render->state={this.state.value} - {this.state.message} 

Το this.state.messageπεριέχει τιμές απόthis.state.value

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

Ας δούμε το αποτέλεσμα αυτού.

Η αρχική έξοδος φαίνεται παρακάτω, καθώς η τιμή είναι 0 για να ξεκινήσετε.

Μετά το πρώτο κλικ, αναμένουμε την παρακάτω έξοδο:

render->state=1 -click-state 1

αλλά το παίρνουμε αντ 'αυτού:

Στο δεύτερο κλικ, η έξοδος εξακολουθεί να μην ταιριάζει όπως φαίνεται παρακάτω.

Μέχρι τώρα μπορεί να αναβάλλετε ή να ξύσετε το κεφάλι σας :)

Η συνάρτηση onClick ()

Ας ρίξουμε μια ματιά στη συνάρτηση onClick () για να κατανοήσουμε το ζήτημα.

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

Θα το επιδιορθώσουμε χρησιμοποιώντας τη λειτουργική πτυχή του setState.

Για να δείξουμε την επιδιόρθωση, ας δημιουργήσουμε ένα ακόμη κουμπί:

Click-setState fn

Και προσθέστε έναν νέο χειριστή κλικ στοClickfn () όπως φαίνεται παρακάτω

Η παραπάνω μέθοδος χρησιμοποιεί τη λειτουργική παράμετρο στο setState.

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

Αυτή η συνάρτηση παίρνει δύο παραμέτρους ως ορίσματα: η πρώτη είναι η prevState και η δεύτερη είναι τα στηρίγματα (σε περίπτωση που χρειάζεστε επίσης στηρίγματα, η οποία περνά από το γονικό στοιχείο). Εδώ εξετάζουμε μόνο το prevState.

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

Ας δούμε την έξοδο μετά από μερικά κλικ. Θα διαπιστώσετε ότι οι τιμές είναι πάντα συγχρονισμένες όταν κάνετε κλικ στο δεύτερο κουμπί.

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

Μια ακόμη προειδοποίηση που πρέπει να γνωρίζουμε: το setState () παίρνει μια ακόμη συνάρτηση επανάκλησης, η οποία εκτελείται μόλις ενημερωθούν επιτυχώς οι τιμές κατάστασης

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

Ας δούμε ένα τελικό παράδειγμα.

Ας υποθέσουμε ότι θέλουμε να καταγράψουμε την τιμή κατάστασης μετά την ενημέρωση και γράφουμε τον κώδικα όπως παρακάτω. Θα χρησιμοποιήσω το πρόγραμμα χειρισμού onClickfn () για αυτό.

Αλλά ας δούμε console.logκαι να επαληθεύσουμε αν η τιμή είναι σωστή ή όχι. Μετά από τρία κλικ, λαμβάνετε αυτήν την κατάσταση:

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

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

Ας δούμε την τελική έξοδο με τον παραπάνω τροποποιημένο κώδικα.

Τυλίγοντας

Ελπίζω αυτό το μικρό άρθρο να ξεκαθαρίσει κάποιες παρανοήσεις σχετικά με το setState.

Ο πλήρης πηγαίος κώδικας είναι διαθέσιμος στο jsbin.

Καλή κωδικοποίηση!

Μάθετε μαζί μου @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Προώθηση: Ειδικό κουπόνι αξίας 10 $ για μεσαίους αναγνώστες για το επερχόμενο live ReactJS-Πέρα από τα βασικά μαθήματα για το udemy σε περίπτωση που επιθυμείτε να υποστηρίξετε το πρόγραμμα σπουδών ανοιχτού κώδικα Μάθετε μηχανική frontend σε 12 έως 20 εβδομάδες