Άγκιστρα στο React JS και γιατί τα χρειαζόμαστε;

άγκιστρα

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

Πριν από το Hooks στο React

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

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

After Hooks στην έκδοση React JS (16.8).

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

Τα πιο συχνά χρησιμοποιούμενα Hook στο React JS

Μερικά από τα συνήθως χρησιμοποιούμενα hook στο React είναι:
1. χρήση Κατάσταση
Αυτό το άγκιστρο χρησιμοποιείται για την προσθήκη κατάστασης σε λειτουργικά στοιχεία. Λαμβάνει μια αρχική τιμή ως όρισμα και επιστρέφει έναν πίνακα με δύο στοιχεία: την τιμή της τρέχουσας κατάστασης και μια συνάρτηση για την ενημέρωση του.

const [count, setCount] = useState(0);

Στο παραπάνω παράδειγμα, η κατάσταση count αρχικοποιείται σε 0 και η συνάρτηση setCount χρησιμοποιείται για την ενημέρωση της.

2. useEffect
Αυτό το άγκιστρο χρησιμοποιείται για την εκτέλεση παρενεργειών σε λειτουργικά εξαρτήματα. Είναι παρόμοιο με το componentDidMount, το componentDidUpdate και το componentWillUnmount συνδυαστικά. Μπορείτε να το χρησιμοποιήσετε για να ανακτήσετε δεδομένα, να χειριστείτε το DOM ή να εκτελέσετε οποιαδήποτε άλλη παρενέργεια που απαιτεί πρόσβαση στην κατάσταση του στοιχείου.

useEffect(() => { document.title = `You clicked ${count} times`;
}, [count]);

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

3. useContext
Αυτό το άγκιστρο χρησιμοποιείται για την κατανάλωση ενός περιβάλλοντος που δημιουργήθηκε από το API CreContext. Σας επιτρέπει να έχετε πρόσβαση στις τιμές που παρέχονται από το πλησιέστερο Provider συστατικό.

const value = useContext(MyContext);

Στο παραπάνω παράδειγμα, το άγκιστρο useContext χρησιμοποιείται για πρόσβαση στην τιμή που παρέχεται από τον πάροχο MyContext.

Προσαρμοσμένοι γάντζοι:

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

function useCustomHook() {
const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`);
}, [count]); return [count, setCount];
} function Component1() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
} function Component2() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count - 1)}> Click me </button> </div>
);
}

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

Συμπέρασμα

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

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

Αν σας αρέσουν αυτά τα άρθρα στο Hooks in React κάντε like και ακολουθήστε για περισσότερο περιεχόμενο σαν αυτό.
Κάντε οποιαδήποτε ερώτηση και προτείνετε θέματα για να γράψετε για εσάς.

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

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://www.codementor.io/rizatech/hooks-in-react-js-and-why-we-need-them-23e0e3fhz5