Τι είναι το Hooks και τι χρησιμοποιεί;
Η React είναι μια από τις πιο δημοφιλείς βιβλιοθήκες που χρησιμοποιούνται στην ανάπτυξη ιστού σήμερα. Έχει φέρει επανάσταση στον τρόπο κατασκευής των διαδικτυακών εφαρμογών, καθιστώντας το ευκολότερο και πιο αποτελεσματικό από ποτέ. Ένας από τους βασικούς λόγους για τη δημοτικότητά του είναι η εισαγωγή των hook, τα οποία έχουν διευκολύνει τους προγραμματιστές να διαχειρίζονται την κατάσταση στις εφαρμογές τους.
Σε αυτό το άρθρο, θα ρίξουμε μια πιο προσεκτική ματιά στο τι είναι τα hook και πώς μπορούν να χρησιμοποιηθούν σε εφαρμογές React. Θα ξεκινήσουμε συζητώντας την έννοια της κατάστασης στο React, πριν προχωρήσουμε στο να εξηγήσουμε τι είναι τα hook και πώς λειτουργούν. Θα παρέχουμε επίσης παραδείγματα για το πώς μπορούν να χρησιμοποιηθούν τα hook σε διαφορετικούς τύπους εφαρμογών React.
Πολιτεία στο React
Προτού μπορέσουμε να συζητήσουμε τα hook, πρέπει πρώτα να κατανοήσουμε την έννοια της κατάστασης στο React. Στο React, η κατάσταση χρησιμοποιείται για τη διαχείριση των δεδομένων που χρησιμοποιούνται από ένα στοιχείο. Αυτά τα δεδομένα μπορεί να είναι οτιδήποτε, από συμβολοσειρά ή αριθμό έως πίνακα ή αντικείμενο. Όταν αλλάζει η κατάσταση ενός στοιχείου, το React αποδίδει αυτόματα το στοιχείο για να αντικατοπτρίζει τη νέα κατάσταση.
Υπάρχουν δύο τρόποι διαχείρισης της κατάστασης στο React: χρησιμοποιώντας στοιχεία κλάσης και χρήση λειτουργικών στοιχείων. Τα στοιχεία κλάσης χρησιμοποιούν μια ειδική μέθοδο που ονομάζεται setState για την ενημέρωση της κατάστασης ενός στοιχείου, ενώ τα λειτουργικά στοιχεία βασίζονται σε άγκιστρα για τη διαχείριση της κατάστασης.
Τι είναι τα Hooks;
Τα Hooks είναι μια νέα δυνατότητα στο React που παρουσιάστηκε στην έκδοση 16.8. Επιτρέπουν στους προγραμματιστές να χρησιμοποιούν κατάσταση και άλλες δυνατότητες του React σε λειτουργικά στοιχεία. Αυτό σημαίνει ότι οι προγραμματιστές μπορούν πλέον να δημιουργούν στοιχεία που χρησιμοποιούν κατάσταση χωρίς να χρειάζεται να χρησιμοποιούν στοιχεία κλάσης.
Τα άγκιστρα έρχονται σε διαφορετικές μορφές, το καθένα εξυπηρετεί διαφορετικό σκοπό. Τα πιο συχνά χρησιμοποιούμενα hook είναι τα useState, useEffect, useContext και useReducer. Θα συζητήσουμε κάθε ένα από αυτά τα άγκιστρα με περισσότερες λεπτομέρειες παρακάτω.
χρήση Κατάσταση
Το άγκιστρο useState χρησιμοποιείται για τη διαχείριση κατάστασης σε λειτουργικά στοιχεία. Λαμβάνει μια αρχική τιμή ως όρισμα και επιστρέφει έναν πίνακα που περιέχει την τρέχουσα κατάσταση και μια συνάρτηση που μπορεί να χρησιμοποιηθεί για την ενημέρωση της κατάστασης. Ακολουθεί ένα παράδειγμα για το πώς μπορεί να χρησιμοποιηθεί το useState:
`` Javascript
εισαγωγή React, { useState } από το "react";
Παράδειγμα συνάρτησης() {
const [count, setCount] {{0}} useState(0);
επιστροφή (
Κάνατε κλικ {count} φορές
);
}
```
Σε αυτό το παράδειγμα, χρησιμοποιούμε το useState για να διαχειριστούμε την κατάσταση ενός μετρητή. Η αρχική τιμή του μετρητή ορίζεται σε 0 χρησιμοποιώντας useState. Στη συνέχεια χρησιμοποιούμε το setCount για να ενημερώνουμε την τιμή του μετρητή κάθε φορά που γίνεται κλικ στο κουμπί.
useEffect
Το άγκιστρο useEffect χρησιμοποιείται για την εκτέλεση παρενεργειών σε λειτουργικά εξαρτήματα. Οι παρενέργειες είναι οποιεσδήποτε ενέργειες εκτελούνται εκτός του στοιχείου, όπως η ανάκτηση δεδομένων από ένα API ή η ενημέρωση του τίτλου της σελίδας.
Το άγκιστρο useEffect παίρνει δύο ορίσματα: μια συνάρτηση που εκτελεί την παρενέργεια και μια σειρά από εξαρτήσεις. Η συνάρτηση καλείται κάθε φορά που αποδίδεται το στοιχείο και οι εξαρτήσεις χρησιμοποιούνται για να καθοριστεί πότε πρέπει να κληθεί η συνάρτηση. Ακολουθεί ένα παράδειγμα για το πώς μπορεί να χρησιμοποιηθεί το useEffect:
`` Javascript
εισαγωγή React, { useState, useEffect } από το "react";
Παράδειγμα συνάρτησης() {
const [count, setCount] {{0}} useState(0);
useEffect(() => {
document.title=`Κάνατε κλικ σε ${count} φορές`;
}, [count]);
επιστροφή (
Κάνατε κλικ {count} φορές
);
}
```
Σε αυτό το παράδειγμα, χρησιμοποιούμε το useEffect για να ενημερώνουμε τον τίτλο της σελίδας κάθε φορά που ενημερώνεται ο μετρητής. Περνάμε σε έναν πίνακα που περιέχει τη μεταβλητή count στο useEffect, που λέει στο React να καλεί τη συνάρτηση μόνο όταν αλλάζει ο αριθμός.
useContext
Το άγκιστρο useContext χρησιμοποιείται για πρόσβαση σε δεδομένα που είναι αποθηκευμένα σε έναν πάροχο περιβάλλοντος. Το Context είναι ένας τρόπος για να μοιράζεστε δεδομένα μεταξύ στοιχείων χωρίς να τα μεταβιβάζετε μέσω υποστηριγμάτων.
Για να χρησιμοποιήσουμε το useContext, πρέπει πρώτα να δημιουργήσουμε έναν πάροχο περιβάλλοντος χρησιμοποιώντας τη συνάρτηση createContext. Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε το useContext για πρόσβαση στα δεδομένα που είναι αποθηκευμένα στον πάροχο. Ακολουθεί ένα παράδειγμα για το πώς μπορεί να χρησιμοποιηθεί το useContext:
`` Javascript
εισαγωγή React, { useState, useContext } από το "react";
const ThemeContext=React.createContext("light");
Παράδειγμα συνάρτησης() {
const [θέμα, setTheme]=useState("light");
επιστροφή (
);
}
γραμμή εργαλείων λειτουργίας () {
const theme=useContext(ThemeContext);
επιστροφή (
Το τρέχον θέμα είναι: {theme}
);
}
```
Σε αυτό το παράδειγμα, χρησιμοποιούμε useContext για πρόσβαση στη μεταβλητή θέματος που είναι αποθηκευμένη στον πάροχο ThemeContext. Μπορούμε να ενημερώσουμε τη μεταβλητή θέματος κάνοντας κλικ στο κουμπί στο στοιχείο Παράδειγμα.
useReducer
Το άγκιστρο useReducer χρησιμοποιείται για τη διαχείριση σύνθετης κατάστασης σε λειτουργικά στοιχεία. Είναι παρόμοιο με το άγκιστρο useState, αλλά αντί να ενημερώνει άμεσα την κατάσταση, χρησιμοποιεί μια λειτουργία μειωτήρα για την ενημέρωση της κατάστασης.
Μια συνάρτηση μειωτήρα παίρνει δύο ορίσματα: την τρέχουσα κατάσταση και ένα αντικείμενο δράσης. Επιστρέφει μια νέα κατάσταση με βάση την ενέργεια που εκτελέστηκε. Το άγκιστρο useReducer παίρνει τη συνάρτηση μειωτήρα και την αρχική κατάσταση ως ορίσματα και επιστρέφει έναν πίνακα που περιέχει την τρέχουσα κατάσταση και μια συνάρτηση αποστολής που μπορεί να χρησιμοποιηθεί για την εκτέλεση ενεργειών. Ακολουθεί ένα παράδειγμα για το πώς μπορεί να χρησιμοποιηθεί το useReducer:
`` Javascript
εισαγωγή React, { useReducer } από το "react";
μειωτής λειτουργίας (κατάσταση, δράση) {
διακόπτης (action.type) {
περίπτωση "προσαύξηση":
return { count: state.count + 1 };
περίπτωση "μείωση":
return { count: state.count - 1 };
αθέτηση:
ρίχνει νέο Σφάλμα();
}
}
Παράδειγμα συνάρτησης() {
const [κατάσταση, αποστολή] {{0}} useReducer(reducer, { count: 0 });
επιστροφή (
Κάνατε κλικ στο {state.count} φορές
);
}
```
Σε αυτό το παράδειγμα, χρησιμοποιούμε το useReducer για να διαχειριστούμε την κατάσταση ενός μετρητή. Περνάμε σε μια συνάρτηση μείωσης που ενημερώνει τη μεταβλητή count με βάση την ενέργεια που εκτελέστηκε. Στη συνέχεια χρησιμοποιούμε τη συνάρτηση αποστολής για να εκτελέσουμε τις ενέργειες.
Σύναψη
Τα Hooks έχουν κάνει πιο εύκολη από ποτέ τη διαχείριση κατάστασης στις εφαρμογές React. Μας επιτρέπουν να δημιουργήσουμε λειτουργικά στοιχεία που μπορούν να χρησιμοποιούν κατάσταση και άλλες δυνατότητες του React, χωρίς να χρειάζεται να χρησιμοποιούμε στοιχεία κλάσης. Σε αυτό το άρθρο, έχουμε συζητήσει τα πιο συχνά χρησιμοποιούμενα hook στο React: useState, useEffect, useContext και useReducer. Παρέχουμε επίσης παραδείγματα για το πώς αυτά τα hook μπορούν να χρησιμοποιηθούν σε διαφορετικούς τύπους εφαρμογών React.
Κατανοώντας πώς λειτουργούν τα hook και πώς να τα χρησιμοποιήσετε, μπορείτε να γράψετε πιο αποτελεσματικό και διατηρήσιμο κώδικα στις εφαρμογές σας React. Εάν δεν το έχετε κάνει ήδη, σας ενθαρρύνουμε να αρχίσετε να χρησιμοποιείτε τα hooks στα δικά σας έργα και να βιώσετε τα οφέλη που προσφέρουν στη ροή εργασιών ανάπτυξης σας.