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

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

Τι είναι τα React Hooks;

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

Υπάρχουν λίγα διαφορετικά Hooks στο React, αλλά τα πιο συχνά χρησιμοποιούμενα είναι useState και useEffect. Το άγκιστρο useState σάς επιτρέπει να προσθέτετε κατάσταση στα στοιχεία σας. Αυτό είναι χρήσιμο για πράγματα όπως η παρακολούθηση της εισαγωγής ενός χρήστη ή οι αλλαγές σε μια φόρμα. Το άγκιστρο useEffect σάς επιτρέπει να εκτελείτε μια λειτουργία κάθε φορά που αποδίδεται ένα στοιχείο. Αυτό είναι χρήσιμο για πράγματα όπως η ανάκτηση δεδομένων από ένα API ή η ρύθμιση μιας συνδρομής.

instagram viewer

Πότε πρέπει να χρησιμοποιείτε τα React Hooks;

Θα πρέπει να χρησιμοποιείτε τα React Hooks όποτε χρειάζεται να προσθέσετε επιπλέον λειτουργικότητα σε ένα στοιχείο. Για παράδειγμα, εάν χρειάζεται να παρακολουθείτε τα δεδομένα εισόδου ενός χρήστη, θα χρησιμοποιήσετε το άγκιστρο useState. Εάν χρειάζεται να ανακτήσετε δεδομένα από ένα API, θα χρησιμοποιήσετε το άγκιστρο useEffect. Μπορείτε επίσης να δημιουργήστε προσαρμοσμένα άγκιστρα για κλήσεις API.

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

Βέλτιστες πρακτικές με τα React Hooks

Τώρα που ξέρετε τι είναι τα React Hook και πότε να τα χρησιμοποιείτε, ας μιλήσουμε για μερικές βέλτιστες πρακτικές.

1. Μόνο Call Hooks από React Functions

Θα πρέπει να καλείτε μόνο τα React Hooks από τις λειτουργίες React. Εάν προσπαθήσετε να καλέσετε react hook από ένα στοιχείο κλάσης, θα λάβετε ένα σφάλμα.

Αυτό συμβαίνει επειδή μπορείτε να καλέσετε ένα React Hook μόνο από μια συνάρτηση React. Οι συναρτήσεις React είναι στοιχεία που δηλώνετε με μια λέξη-κλειδί συνάρτησης.

Ακολουθεί ένα παράδειγμα ενός στοιχείου συνάρτησης React:

εισαγωγή React, { useState } από 'αντιδρώ';
λειτουργίαApp() {
συνθ [count, setCount] = useState(0);
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{μετρώ}</Π>
<κουμπί onClick={() => setCount (count + 1)}>
 Κάντε κλικ με
</button>
</div>
 );
}

Και εδώ είναι ένα παράδειγμα ενός στοιχείου κλάσης:

εισαγωγή React, { Component } από 'αντιδρώ';
τάξηAppεκτείνεταιΣυστατικό{
 κατάσταση = {
 καταμέτρηση: 0
 };
render() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{this.state.count}</Π>
<κουμπί onClick={() => this.setState({ count: this.state.count + 1 })}>
 Κάντε κλικ με
</button>
</div>
 );
 }
}

Το πρώτο παράδειγμα δηλώνει το στοιχείο App χρησιμοποιώντας τη λέξη-κλειδί συνάρτησης, ενώ το δεύτερο χρησιμοποιεί τη λέξη-κλειδί κλάσης.

2. Χρησιμοποιήστε μόνο ένα useEffect Hook

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

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

εισαγωγή React, { useState, useEffect } από 'αντιδρώ';
λειτουργίαApp() {
συνθ [count, setCount] = useState(0);


useEffect(() => {
 console.log('Αυτό θα εκτελείται κάθε φορά που αποδίδεται το στοιχείο της εφαρμογής!');
 }, []);


useEffect(() => {
 console.log('Αυτό θα εκτελείται επίσης κάθε φορά που αποδίδεται το στοιχείο της εφαρμογής!');
 }, []);
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{μετρώ}</Π>
<κουμπί onClick={() => setCount (count + 1)}>
 Κάντε κλικ με
</button>
</div>
 );
}

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

εισαγωγή React, { useState, useEffect } από 'αντιδρώ';
λειτουργίαApp() {
συνθ [count, setCount] = useState(0);


useEffect(() => {
 console.log('Αυτό θα εκτελείται κάθε φορά που αποδίδεται το στοιχείο της εφαρμογής!');
 console.log('Αυτό θα εκτελείται επίσης κάθε φορά που αποδίδεται το στοιχείο της εφαρμογής!');
 }, []);
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{μετρώ}</Π>
<κουμπί onClick={() => setCount (count + 1)}>
 Κάντε κλικ με
</button>
</div>
 );
}

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

3. Χρησιμοποιήστε Hooks στο Ανώτατο Επίπεδο

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

εισαγωγή React, { useState } από 'αντιδρώ';
λειτουργίαApp() {
Για (αφήνω i = 0; i < 10; i++) {
// Μην το κάνεις αυτό!
συνθ [count, setCount] = useState(0);
 }
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{μετρώ}</Π>
<κουμπί onClick={() => setCount (count + 1)}>
 Κάντε κλικ με
</button>
</div>
 );
}

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

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

εισαγωγή React, { useState } από 'αντιδρώ';
λειτουργίαApp() {
// Αυτός είναι ο σωστός τρόπος χρήσης του useState μέσα σε έναν βρόχο
συνθ [count, setCount] = useState(0);


Για (αφήνω i = 0; i < 10; i++) {
// ...
 }
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{μετρώ}</Π>
<κουμπί onClick={() => setCount (count + 1)}>
 Κάντε κλικ με
</button>
</div>
 );
}

4. Μην υπερχρησιμοποιείτε τα άγκιστρα

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

Τα React Hook είναι πιο χρήσιμα όταν χρειάζεται να κάνετε κοινή χρήση κατάστασης μεταξύ πολλών στοιχείων. Αποφύγετε τη χρήση περιττών αγκίστρων γιατί μπορεί να κάνουν τον κώδικά σας δυσανάγνωστο και μπορεί να επηρεάσουν την απόδοση εάν χρησιμοποιούνται υπερβολικά.

Προσθέστε περισσότερη λειτουργικότητα χρησιμοποιώντας το React 18 Hooks

Με την κυκλοφορία του React 18, υπάρχουν διαθέσιμα νέα άγκιστρα. Κάθε άγκιστρο είναι συγκεκριμένο για ένα συγκεκριμένο χαρακτηριστικό του React. Μπορείτε να βρείτε μια λίστα με όλα τα διαθέσιμα hook στον ιστότοπο του React. Αλλά τα πιο συχνά χρησιμοποιούμενα άγκιστρα εξακολουθούν να είναι useState και useEffect.