Πώς να διαχειριστείτε αποτελεσματικά την κατάσταση στο React

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

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

Βασικό Παράδειγμα Πολιτείας στο React

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

εισαγωγή {useState} από'αντιδρώ'
εισαγωγή {Μετρητής} από'μετρητής'
λειτουργίαApp(){
συνθ [count, setCount] = useState(0)
ΕΠΙΣΤΡΟΦΗ<Μετρητήςμετρώ={μετρώ}setCount={setCount} />
}
εξαγωγήΠροκαθορισμένο App

Στις γραμμές 1 και 2, εισάγετε το useState() γάντζο για τη δημιουργία του κράτους, και το Μετρητής συστατικό. Εσείς ορίζετε το μετρώ κράτος και setCount μέθοδος ενημέρωσης της κατάστασης. Στη συνέχεια περνάτε και τα δύο στο Μετρητής συστατικό.

ο Μετρητής το στοιχείο στη συνέχεια αποδίδει το μετρώ και κλήσεις setCount για αύξηση και μείωση της καταμέτρησης.

λειτουργίαΜετρητής({count, setCount}) {
ΕΠΙΣΤΡΟΦΗ (


 setCount(προηγ => προηγ. 1)}>-</button>
{count}</span>
 setCount(προηγ => προηγούμενο + 1)}>+</button>
 </div>
 )
}

Δεν το όρισες μετρώ μεταβλητή και setCount λειτουργούν τοπικά μέσα στο Μετρητής συστατικό. Αντίθετα, το μεταβιβάσατε από το γονικό στοιχείο (App). Με άλλα λόγια, χρησιμοποιείτε ένα παγκόσμιο κράτος.

Το πρόβλημα με τα παγκόσμια κράτη

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

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

Μετακίνηση του Κράτους στο Παιδί Συστατικό

Όταν μεταφέρετε το κράτος στο Μετρητής συστατικό, θα μοιάζει με αυτό:

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


 setCount(προηγ => προηγ. 1)}>-</button>
{count}</span>
 setCount(προηγ => προηγούμενο + 1)}>+</button>
 </div>
 )
}

Μετά μέσα σου App συστατικό, δεν χρειάζεται να μεταβιβάσετε τίποτα στο Μετρητής συστατικό:

// εισαγωγές
λειτουργίαApp(){
ΕΠΙΣΤΡΟΦΗ<Μετρητής />
}

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

Κατάσταση χειρισμού σε πιο σύνθετες εφαρμογές

Μια άλλη κατάσταση όπου θα χρησιμοποιούσατε ένα παγκόσμιο κράτος είναι με φόρμες. ο App Το παρακάτω στοιχείο μεταβιβάζει τα δεδομένα της φόρμας (email και κωδικό πρόσβασης) και τη μέθοδο καθορισμού στο Φόρμα σύνδεσης συστατικό.

εισαγωγή { useState } από"αντιδρώ";
εισαγωγή { Φόρμα σύνδεσης } από"./LoginForm";
λειτουργίαApp() {
συνθ [formData, setFormData] = useState({
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: "",
 Κωδικός πρόσβασης: "",
 });
λειτουργίαupdateFormData(νέαΔεδομένα) {
 setFormData((προηγ) => {
ΕΠΙΣΤΡΟΦΗ { ...prev, ...newData };
 });
 }
λειτουργίαonΥποβολή() {
κονσόλα.log (formData);
 }
ΕΠΙΣΤΡΟΦΗ (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

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

λειτουργίαΦόρμα σύνδεσης({ onSubmit, data, updateData }) {
λειτουργίαhandleSubmit(μι) {
 e.preventDefault();
 onSubmit();
 }
ΕΠΙΣΤΡΟΦΗ (


"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ">Ηλεκτρονικό ταχυδρομείο</label>
 τύπος="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
 id="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
 value={data.email}
 onChange={(e) => updateData({ ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: e.target.value })}
 />
"Κωδικός πρόσβασης">Κωδικός πρόσβασης</label>
 τύπος="Κωδικός πρόσβασης"
 id="Κωδικός πρόσβασης"
 value={data.password}
 onChange={(e) => updateData({ Κωδικός πρόσβασης: e.target.value })}
 />
"υποβάλλουν">Υποβολή</button>
 </form>
 );
}

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

εισαγωγή { useRef } από"αντιδρώ";
λειτουργίαΦόρμα σύνδεσης({ onSubmit }) {
συνθ emailRef = useRef();
συνθ passwordRef = useRef();

λειτουργίαhandleSubmit(μι) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 κωδικός πρόσβασης: passwordRef.current.value,
 });
 }
ΕΠΙΣΤΡΟΦΗ (


"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ">Ηλεκτρονικό ταχυδρομείο</label>
"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" id="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" ref={emailRef} />
"Κωδικός πρόσβασης">Κωδικός πρόσβασης</label>
"Κωδικός πρόσβασης" id="Κωδικός πρόσβασης" ref={passwordRef} />
"υποβάλλουν">Υποβολή</button>
 </form>
 );
}

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

Στο γονικό στοιχείο (App.js), μπορείτε να καταργήσετε και την καθολική κατάσταση και updateFormData() μέθοδο γιατί δεν το χρειάζεστε πλέον. Η μόνη λειτουργία που απομένει είναι onSubmit(), το οποίο επικαλείστε από το εσωτερικό του Φόρμα σύνδεσης στοιχείο για να καταγράψετε τα στοιχεία σύνδεσης στην κονσόλα.

λειτουργίαApp() {
λειτουργίαonΥποβολή(φόρμαΔεδομένα) {
κονσόλα.log (formData);
 }
ΕΠΙΣΤΡΟΦΗ (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Όχι μόνο κάνατε την πολιτεία σας όσο το δυνατόν πιο τοπική, αλλά αφαιρέσατε την ανάγκη για οποιαδήποτε πολιτεία (και χρησιμοποιήσατε αναφ αντι αυτου). Οπότε το δικό σου App συστατικό έχει γίνει σημαντικά απλούστερο (έχει μόνο μία λειτουργία).

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

Χειρισμός Κοινό Κράτος

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

Ένα παράδειγμα είναι η ύπαρξη α TodoContainer γονικό στοιχείο με δύο θυγατρικά εξαρτήματα: TodoList και TodoCount.

λειτουργίαTodoContainer() {
συνθ [todos, setTodos] = useState([])
ΕΠΙΣΤΡΟΦΗ (
 <>


 </>
 )
}

Και τα δύο αυτά εξαρτήματα παιδιών απαιτούν το todos κράτος, έτσι TodoContainer το περνάει και στους δύο. Σε σενάρια όπως αυτά, πρέπει να κάνετε το κράτος όσο το δυνατόν πιο τοπικό. Στο παραπάνω παράδειγμα, βάζοντάς το μέσα στο TodosContainer είναι τόσο τοπικό όσο μπορείτε.

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

Για μεγάλες εφαρμογές, η διαχείριση του κράτους μόνο με το useState() Ο γάντζος μπορεί να αποδειχθεί δύσκολος. Σε τέτοιες περιπτώσεις, μπορεί να χρειαστεί να επιλέξετε το React Context API ή React Redux για την αποτελεσματική διαχείριση του κράτους.

Μάθετε περισσότερα σχετικά με τα React Hooks

Τα Hooks αποτελούν τη βάση του React. Χρησιμοποιώντας άγκιστρα στο React, μπορείτε να αποφύγετε τη σύνταξη μακροσκελούς κώδικα που διαφορετικά θα χρησιμοποιούσε κλάσεις. Το άγκιστρο useState() είναι αναμφισβήτητα το πιο συχνά χρησιμοποιούμενο άγκιστρο React, αλλά υπάρχουν πολλά άλλα όπως useEffect(), useRef() και useContext().

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