UseState vs. useReducer στο React: Picking the Right State Management Hook

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

Τα Hook είναι απλώς συναρτήσεις JavaScript που απομονώνουν και σας επιτρέπουν να επαναχρησιμοποιήσετε τη λογική σε μια εφαρμογή React. Για τη διαχείριση του κράτους, υπάρχουν δύο βασικά άγκιστρα στη διάθεσή σας—το χρήση Κατάσταση γάντζος και το useReducer άγκιστρο.

Επισκόπηση του useState Hook

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

συνθ [state, setState] = useState (initialStateValue);

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

ο χρήση Κατάσταση Το hook επιστρέφει έναν πίνακα με ακριβώς δύο στοιχεία. Λαμβάνει επίσης μια αρχική τιμή για τη μεταβλητή κατάσταση.

Για παράδειγμα, αν θέλετε να ορίσετε μια μεταβλητή κατάστασης που αντιπροσωπεύει την ηλικία του χρήστη, με αρχική τιμή 17, θα το κάνατε ως εξής:

συνθ [UserAge, setUserAge] = useState(17);

ο setUserAge η λειτουργία είναι υπεύθυνη για την τροποποίηση του Ηλικία χρήστη μεταβλητή κατάστασης.

setUserAge(19);

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

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

Ηλικία χρήστη = 19;

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

λειτουργίαApp(){
ΕΠΙΣΤΡΟΦΗ (




 </div>
 )
}

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

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

Επισκόπηση της χρήσηςReducer Hook

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

συνθ [state, dispatch] = useReducer (μειωτής, αρχική κατάσταση)

Σε σύγκριση με χρήση Κατάσταση, σε useReducer, υπάρχει ένα κατάσταση μεταβλητή και α επιστολή λειτουργία που στέλνει ενέργειες μέχρι το περιστέλλων λειτουργία που χειρίζεται ωφέλιμα φορτία και ενημερώνει το κατάσταση.

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

λειτουργίαΜετρητής(){
συνθ [count, setCount] = useState(0);
ΕΠΙΣΤΡΟΦΗ(


 Η καταμέτρηση είναι: {count}


 setCount (count + 1)}>Αύξηση καταμέτρησης</button>
 setCount(0)}>Επαναφορά</button>
 setCount (count - 1)}>Μείωση καταμέτρησης</button>
 </div>
 </div>
 )
}

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

Αυτό το παράδειγμα έχει απλώς σκοπό να δείξει πώς το useReducer ο γάντζος λειτουργεί. Σε μια εφαρμογή πραγματικού κόσμου, useReducer είναι υπερβολικό για αυτό το σενάριο.

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

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

{τύπος:"action_type", φορτίο επί πληρωμή:κατάσταση * 2}

Πρώτα εισάγετε το useReducer γάντζο και, στη συνέχεια, ορίστε το περιστέλλων συνάρτηση με τις παραμέτρους: κατάσταση και οι κατεστραμμένοι δράση αντικείμενο.

εισαγωγή {useReducer} από"αντιδρώ";
λειτουργίαπεριστέλλων(κατάσταση, { type, payload }) {
αν (τύπος 'countIncrease') {
ΕΠΙΣΤΡΟΦΗ φορτίο επί πληρωμή;
 } αλλούαν (τύπος 'countDecrease') {
ΕΠΙΣΤΡΟΦΗ φορτίο επί πληρωμή;
 } αλλούαν (τύπος 'countReset') {
ΕΠΙΣΤΡΟΦΗ φορτίο επί πληρωμή;
 } αλλού {
ΕΠΙΣΤΡΟΦΗ κατάσταση;
 }
}

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

λειτουργίαΜετρητής() {
συνθ [count, dispatch] = useReducer (μειωτής, 0);
ΕΠΙΣΤΡΟΦΗ (


 Η καταμέτρηση είναι: {count}


 επιστολή({ τύπος: 'countIncrease', φορτίο επί πληρωμή: μετρώ + 1 })}>
 Αύξηση καταμέτρησης
 </button>
 επιστολή({ τύπος: 'countReset', φορτίο επί πληρωμή: 0 })}>
 Επαναφορά αριθμού
 </button>
 επιστολή({ τύπος: 'countDecrease', φορτίο επί πληρωμή: μετρώ - 1 })}>
 Αύξηση καταμέτρησης
 </button>
 </div>
 </div>
 );
}

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

Το δεύτερο κουμπί αποστέλλει μια ενέργεια τύπου countΕπαναφορά με ωφέλιμο φορτίο 0 που επαναφέρει την τιμή μέτρησης στο 0.

Το τρίτο κουμπί αποστέλλει μια ενέργεια τύπου countΜείωση με ωφέλιμο φορτίο καταμέτρηση - 1 που μειώνει την τιμή μέτρησης κατά 1.

Επιλογή μεταξύ useState και useReducer Hooks

Τώρα, που καταλαβαίνετε πώς να χρησιμοποιήσετε χρήση Κατάσταση και useReducer αγκίστρια, είναι σημαντικό να γνωρίζετε πότε να χρησιμοποιήσετε το σωστό.

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

Αν η πολιτεία σας είναι κάθε άλλο παρά Πρωτότυπα JavaScript όπως αριθμοί, συμβολοσειρές και τιμές boolean, θα πρέπει να χρησιμοποιήσετε το χρήση Κατάσταση άγκιστρο. Και αν ο τύπος κατάστασης είναι ένα αντικείμενο ή ένας πίνακας, τότε θα πρέπει να εξετάσετε το ενδεχόμενο χρήσης useReducer αντι αυτου.

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

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

Διευκολύνουμε τη διαχείριση του κράτους με τις βιβλιοθήκες JavaScript

Βιβλιοθήκες όπως η React, η Vue και η Svelte έχουν όλες τους δικούς τους τρόπους χειρισμού της κατάστασης. Ο χειρισμός της διαχείρισης κατάστασης μόνος σας με τη vanilla JavaScript είναι σίγουρα κάτι που μπορείτε να δοκιμάσετε, αλλά είναι πολύ πιο εύκολο και πιο βολικό να χρησιμοποιήσετε μια βιβλιοθήκη JavaScript δοκιμασμένη σε μάχη.

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