Μπορεί να γνωρίζετε ήδη για τα React hooks και ακόμη και ποια βασικά hook προσφέρει το πλαίσιο. Τα Hooks σάς επιτρέπουν να διαχειρίζεστε κατάσταση και άλλες λειτουργίες χωρίς να χρειάζεται να γράψετε μια τάξη. Τα βασικά άγκιστρα είναι χρήση Κατάσταση, useEffect, και useContext. Σε αυτό το άρθρο, θα μάθετε για ορισμένα πρόσθετα άγκιστρα που προσθέτουν πιο περίπλοκη συμπεριφορά.

Τα πρόσθετα άγκιστρα που θα μάθετε είναι useRef και useMemo.

useRef

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

ο useRef Το άγκιστρο έχει μόνο μία ιδιότητα: .ρεύμα. Το React δεν αποδίδει ξανά τη σελίδα όταν αλλάζει το στοιχείο της. Ούτε αποδίδεται ξανά εάν αλλάξετε την τιμή του .ρεύμα ιδιοκτησία. Ας κατανοήσουμε τη χρήση αυτού του γάντζου με ένα παράδειγμα:

εισαγωγή React, { useState, useRef } από το 'react';
εξαγωγή προεπιλεγμένης συνάρτησης App() {
const count = useRef (null);
const [number, setNumber] = useState (0);
const checkNumber = () => {
εάν (count.current.value < 10) {
count.current.style.backgroundColor = "κόκκινο";
} αλλο {
count.current.style.backgroundColor = "πράσινο";
}
};
ΕΠΙΣΤΡΟΦΗ (


Εισαγάγετε έναν αριθμό μεγαλύτερο από 10

ref={count}
πληκτρολογήστε "κείμενο"
αξία={αριθμός}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Κάντε κλικ



);
}

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

Όταν κάνετε κλικ στο κουμπί, το checkNumber() καλείται η συνάρτηση. Αυτή η συνάρτηση ελέγχει εάν η τιμή του αριθμός είναι μεγαλύτερο από 10. Τότε ορίζει το χρώμα του φόντου του στοιχείου εισόδου χρησιμοποιώντας το count.current.style.backgroundColor ιδιοκτησία.

Σχετίζεται με: Βασικές αρχές CSS: Εργασία με χρώματα

useMemo

Το άγκιστρο useMemo θα υπολογίσει εκ νέου μια αποθηκευμένη τιμή όταν αλλάξει κάποια από τις εξαρτήσεις του. Αυτή η βελτιστοποίηση βοηθά στην αποφυγή ακριβών υπολογισμών σε κάθε απόδοση.

Η σύνταξη του useMemo ο γάντζος έχει ως εξής:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

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

εισαγωγή React, { useState, useMemo } από το 'react';
εξαγωγή προεπιλεγμένης συνάρτησης App() {
const [color1, setColor1] = useState("μπλε");
const [color2, setColor2] = useState("πράσινο");
const toggleColor1 = () => {
επιστροφή χρώματος1 "μπλε"; setColor1("κόκκινο"): setColor1("μπλε");
};
const toggleColor2 = () => {
χρώμα2 "πράσινο"; setColor2("πορτοκαλί"): setColor2("πράσινο");
};
const displayColor = () => {
var now = new Date().getTime();
ενώ (new Date().getTime() < now + 1000);
επιστροφή χρώματος1 "μπλε"; "cool": "hot";
};
ΕΠΙΣΤΡΟΦΗ (


Χρώμα κειμένου 1: {color1}

Είναι χρώμα {displayColor()}

Εναλλαγή χρώματος
Χρώμα κειμένου 2: {color2}

Εναλλαγή χρώματος



);
}

Όταν κάνετε κλικ στο κουμπί εναλλαγής 1, θα πρέπει να παρατηρήσετε μια μικρή καθυστέρηση ενώ αλλάζει η κατάσταση. Σημειώστε ότι υπάρχει επίσης μια καθυστέρηση όταν κάνετε κλικ στο κουμπί εναλλαγής2. Αλλά αυτό δεν πρέπει να συμβεί, αφού η παύση ενός δευτερολέπτου συμβαίνει μέσα Χρώμα οθόνης. Σε αυτή τη σελίδα, τα κουμπιά θα πρέπει να μπορούν να λειτουργούν ανεξάρτητα. Για να το πετύχετε αυτό, μπορείτε να χρησιμοποιήσετε το useMemo άγκιστρο.

Πρέπει να τυλίξετε το Χρώμα οθόνης λειτουργία στο useMemo αγκίστρι και περάστε χρώμα 1 στον πίνακα εξάρτησης.

const displayColor = useMemo(() => {
var now = new Date().getTime();
ενώ (new Date().getTime() < now + 1000);
επιστροφή χρώματος1 "μπλε"; "cool": "hot";
}, [χρώμα1]);

ο useMemo Το άγκιστρο παίρνει μια συνάρτηση και τις εξαρτήσεις ως παραμέτρους. ο useMemo Το hook θα αποδοθεί μόνο όταν αλλάξει μία από τις εξαρτήσεις του. Είναι χρήσιμο σε περιπτώσεις που πρέπει να κάνετε λήψη από ένα API.

Τι να κάνετε στη συνέχεια μετά την εκμάθηση αγκίστρων

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

Υπάρχουν και άλλα προηγμένα άγκιστρα όπως useReducer, useLayoutEffect, και χρησιμοποιήστεDebugValue. Μπορείτε να τα μάθετε ανατρέχοντας στην επίσημη τεκμηρίωση του React.

Ουνάτι Μπαμάνια (Δημοσιεύτηκαν 10 άρθρα)

Ο Unnati είναι ένας ενθουσιώδης προγραμματιστής full stack. Της αρέσει να κατασκευάζει έργα χρησιμοποιώντας διάφορες γλώσσες προγραμματισμού. Στον ελεύθερο χρόνο της, της αρέσει να παίζει κιθάρα και είναι λάτρης της μαγειρικής.

Περισσότερα από τον Unnati Bamania