Πού να διατηρήσετε τα δεδομένα του React Component: κατάσταση, αποθήκευση, στατικό και αυτό

Πού να διατηρήσετε τα δεδομένα του React Component: κατάσταση, αποθήκευση, στατικό και αυτό

Με την έλευση του React και του Redux, προέκυψε ένα κοινό ερώτημα:

Τι πρέπει να κατέχω στο κατάστημα Redux και τι πρέπει να αποθηκεύσω στην τοπική πολιτεία ;

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

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

Τοπική πολιτεία

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

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

Ακολουθεί μια βασική εφαρμογή μετρητή που χρησιμοποιεί την τοπική πολιτεία :

Τα δεδομένα σας (η τιμή του μετρητή) αποθηκεύονται στο στοιχείο της εφαρμογής και μπορούν να μεταβιβαστούν στα παιδιά του.

Χρησιμοποιήστε θήκες

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

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

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

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

Takeaway: κρατήστε την κατάσταση διεπαφής χρήστη και τα προσωρινά δεδομένα (όπως εισόδους φόρμας) στην τοπική πολιτεία .

Κατάστημα Redux

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

Με τη Redux, έχουμε ένα παγκόσμιο κατάστημα . Αυτό το κατάστημα ζει στο υψηλότερο επίπεδο της εφαρμογής σας και μεταβιβάζει δεδομένα σε όλα τα παιδιά. Συνδέεστε στο παγκόσμιο κατάστημα με το wrapper σύνδεσης και τη λειτουργία mapStateToProps .

Στην αρχή, οι άνθρωποι έβαλαν τα πάντα στο κατάστημα Redux . Χρήστες, modals, φόρμες, πρίζες… το ονομάζετε.

Παρακάτω είναι η ίδια εφαρμογή μετρητή, αλλά χρησιμοποιώντας το Redux. Το σημαντικό πράγμα που πρέπει να σημειωθεί είναι ότι ο μετρητής προέρχεται τώρα από αυτό το .props.counter αφού χαρτογραφηθεί από το mapStateToProps στη λειτουργία σύνδεσης , η οποία παίρνει την τιμή μετρητή από το παγκόσμιο κατάστημα και τη χαρτογραφεί στα στηρίγματα του τρέχοντος στοιχείου .

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

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

Χρησιμοποιήστε θήκες

Το κατάστημα Redux είναι ιδανικό για διατήρηση της κατάστασης εφαρμογής και όχι της κατάστασης διεπαφής χρήστη. Ένα τέλειο παράδειγμα είναι η κατάσταση σύνδεσης του χρήστη. Πολλά από τα στοιχεία σας θα χρειαστούν πρόσβαση σε αυτές τις πληροφορίες, και μόλις αλλάξει η κατάσταση σύνδεσης, όλα αυτά τα στοιχεία (αυτά που αποδίδονται, τουλάχιστον) θα πρέπει να εκδοθούν εκ νέου με τις ενημερωμένες πληροφορίες.

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

Takeaway : διατηρήστε τα δεδομένα που σκοπεύετε να μοιραστείτε μεταξύ των στοιχείων στο κατάστημα .

Αυτό.

Ένα από τα λιγότερο χρησιμοποιούμενα χαρακτηριστικά όταν εργάζεστε με το React είναι αυτό . Οι άνθρωποι συχνά ξεχνούν ότι το React είναι απλώς JavaScript με σύνταξη ES2015. Οτιδήποτε μπορείτε να κάνετε σε JavaScript, μπορείτε επίσης να το κάνετε στο React.

Το παρακάτω παράδειγμα είναι μια λειτουργική εφαρμογή μετρητή, παρόμοια με τα δύο παραπάνω παραδείγματα.

Αποθηκεύουμε την τιμή μετρητή στο στοιχείο και χρησιμοποιούμε το ForceUpdate () για εκ νέου απόδοση όταν αλλάζει η τιμή Αυτό συμβαίνει επειδή οι αλλαγές σε οτιδήποτε άλλο εκτός από την κατάσταση και τα στηρίγματα δεν προκαλούν εκ νέου απόδοση .

Αυτό είναι πραγματικά ένα παράδειγμα για το πώς θα πρέπει να μην χρησιμοποιήσετε αυτό . Εάν βρίσκεστε χρησιμοποιώντας το forceUpdate () , πιθανότατα κάνετε κάτι λάθος. Για τις τιμές για τις οποίες η αλλαγή θα πρέπει να ενεργοποιήσει εκ νέου καθιστούν, θα πρέπει να χρησιμοποιήσετε την τοπική κατάσταση ή στηρίγματα / Redux κατάστημα .

Χρησιμοποιήστε θήκες

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

Επίσης, πολλοί άνθρωποι δεν συνειδητοποιούν ότι χρησιμοποιείτε ήδη αυτό όλη την ώρα στους ορισμούς της λειτουργίας τους. Όταν ορίζετε render () , ορίζετε πραγματικά αυτό.prototype.render = function () , αλλά κρύβεται πίσω από τη σύνταξη κλάσης ES2015.

Takeaway: χρησιμοποιήστε το για να αποθηκεύσετε πράγματα που δεν πρέπει να προκαλέσουν εκ νέου απόδοση.

Στατικός

Οι στατικές μέθοδοι και οι ιδιότητες είναι ίσως η λιγότερο γνωστή πτυχή των τάξεων ES2015 (ηρεμήστε, ναι, ξέρω ότι δεν είναι πραγματικά τάξεις κάτω από την κουκούλα) , κυρίως επειδή δεν χρησιμοποιούνται τόσο συχνά. Αλλά στην πραγματικότητα δεν είναι ιδιαίτερα περίπλοκα. Αν έχετε χρησιμοποιήσει PropTypes , έχετε ήδη ορίσει μια στατική ιδιότητα.

Τα ακόλουθα δύο μπλοκ κώδικα είναι πανομοιότυπα. Το πρώτο είναι ο τρόπος με τον οποίο οι περισσότεροι άνθρωποι ορίζουν PropTypes. Το δεύτερο είναι πώς μπορείτε να τα ορίσετε με στατικό .

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

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

Χρησιμοποιήστε θήκες

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

Οι PropTypes είναι ένα παράδειγμα μιας συνάρτησης βοηθητικού προγράμματος όπου θα συνδέατε με κάτι σαν στοιχείο Button, καθώς κάθε κουμπί που αποδίδετε θα χρειάζεται τις ίδιες τιμές.

Μια άλλη περίπτωση χρήσης είναι εάν ανησυχείτε για υπερβολική ανάκτηση δεδομένων. Εάν χρησιμοποιείτε GraphQL ή Falcor, μπορείτε να καθορίσετε ποια δεδομένα θέλετε από τον διακομιστή σας. Με αυτόν τον τρόπο δεν καταλήγετε να λαμβάνετε πολύ περισσότερα δεδομένα από ό, τι πραγματικά χρειάζεστε για το στοιχείο σας.

Έτσι, στο παραπάνω παράδειγμα, πριν ζητήσετε τα δεδομένα για ένα συγκεκριμένο στοιχείο, θα μπορούσατε γρήγορα να λάβετε μια σειρά απαιτούμενων τιμών για το ερώτημά σας με το App.requiredData. Αυτό σας επιτρέπει να υποβάλετε αίτημα χωρίς υπερβολική ανάκτηση.

Takeaway: πιθανότατα δεν πρόκειται ποτέ να χρησιμοποιήσετε στατικό .

Αυτή η άλλη επιλογή…

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

Υπάρχουν συγκεκριμένες καταστάσεις στις οποίες έχει νόημα, αλλά ως επί το πλείστον απλά δεν πρέπει να το κάνετε.

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

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

Takeaway: Μην χρησιμοποιείτε μεταβλητές με λειτουργικές μονάδες αν μπορείτε να το αποφύγετε.

Ο Sam Corcos είναι ο κύριος προγραμματιστής και συνιδρυτής της Sightline Maps, της πιο διαισθητικής πλατφόρμας για τοπογραφικούς τρισδιάστατους τύπους χαρτών, καθώς και το LearnPhoenix.io, ένας ενδιάμεσος-προηγμένος ιστότοπος φροντιστηρίων για τη δημιουργία επεκτάσιμων εφαρμογών παραγωγής με το Phoenix και το React. Κερδίστε έκπτωση 20 $ από το LearnPhoenix με τον κωδικό κουπονιού: free_code_camp