UseEffect, useLayoutEffect και useEffectEvent: Σύγκριση αγκίστρων ανάκτησης δεδομένων στο React

Τα React hooks είναι ένας ισχυρός τρόπος διαχείρισης των παρενεργειών στα στοιχεία του React. Τρία από τα πιο κοινά άγκιστρα για τον χειρισμό παρενεργειών είναι το useEffect, το useLayoutEffect και το useEffectEvent. Κάθε γάντζος έχει τη μοναδική του περίπτωση χρήσης, επομένως η επιλογή του κατάλληλου για τη δουλειά είναι απαραίτητη.

Το useEffect Hook

ο useEffect γάντζος είναι α βασικό άγκιστρο στο React που σας επιτρέπει να εκτελείτε παρενέργειες όπως χειρισμό DOM, ασύγχρονες λειτουργίες και ανάκτηση δεδομένων σε λειτουργικά στοιχεία. Αυτό το άγκιστρο είναι μια συνάρτηση που παίρνει δύο ορίσματα, τη συνάρτηση εφέ και τον πίνακα εξάρτησης.

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

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

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Αυτός ο κώδικας δείχνει ένα App στοιχείο που ανακτά δεδομένα από ένα εξωτερικό API χρησιμοποιώντας το άγκιστρο useEffect. Η συνάρτηση εφέ του useEffect ανακτά δείγματα δεδομένων από το JSONPlaceholder API. Στη συνέχεια αναλύει την απόκριση JSON και ορίζει τα ανακτημένα δεδομένα στο δεδομένα κατάσταση.

Με την κατάσταση δεδομένων, το στοιχείο App αποδίδει το τίτλος ιδιοκτησία κάθε στοιχείου στην πολιτεία.

Χαρακτηριστικά της χρήσηςEffect Hook

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

Το άγκιστρο useLayoutEffect

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

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

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Το παραπάνω μπλοκ κώδικα αυξάνει το πλάτος του στοιχείου κουμπιού κατά 12 pixel χρησιμοποιώντας το άγκιστρο useLayoutEffect. Αυτό διασφαλίζει ότι το πλάτος του κουμπιού αυξάνεται πριν εμφανιστεί το κουμπί στην οθόνη σας.

Χαρακτηριστικά του useLayoutEffect Hook

• Σύγχρονος: Εκτελείται συγχρονισμένα, αποκλείοντας πιθανώς τη διεπαφή χρήστη εάν η λειτουργία μέσα σε αυτό είναι βαριά.
• DOM ανάγνωση/εγγραφή: Είναι ο καταλληλότερος για ανάγνωση και εγγραφή απευθείας στο DOM, ειδικά αν χρειάζεστε τις αλλαγές προτού το πρόγραμμα περιήγησης ξαναβάψει.

Το useEffectEvent Hook

ο useEffectEvent Το hook είναι ένα γάντζο React που λύνει τα προβλήματα εξαρτήσεων του useEffect άγκιστρο. Εάν είστε εξοικειωμένοι με το useEffect, γνωρίζετε ότι ο πίνακας εξάρτησής του μπορεί να είναι δύσκολος. Μερικές φορές, πρέπει να βάλετε περισσότερες τιμές στον πίνακα εξαρτήσεων που είναι απολύτως απαραίτητες.

Για παράδειγμα:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

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

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

Ο πίνακας εξάρτησης έχει το url μεταβλητή και η onConnected λειτουργία. Το στοιχείο App θα δημιουργήσει τη συνάρτηση onConnected σε κάθε απόδοση. Αυτό θα προκαλέσει την εκτέλεση της συνάρτησης useEffect σε έναν βρόχο, ο οποίος θα συνεχίσει να αποδίδει εκ νέου το στοιχείο της εφαρμογής.

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

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

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

Το άγκιστρο useEffectEvent είναι χρήσιμο όταν θέλετε το useEffect σας να εξαρτάται από μια συγκεκριμένη τιμή, παρόλο που η Το εφέ ενεργοποιεί ένα συμβάν που απαιτεί άλλες τιμές που προτιμάτε να μην χρησιμοποιείτε ως εξαρτήσεις στο useEffect.

Χαρακτηριστικά του useEffectEvent Hook

• Είναι καταλληλότερο για παρενέργειες που οφείλονται σε εκδηλώσεις.
• ο useEffectEvent Το άγκιστρο δεν λειτουργεί με χειριστές συμβάντων όπως στο κλικ, onChange, και τα λοιπά.

Το άγκιστρο useEffectEvent είναι ακόμα πειραματικό και δεν είναι διαθέσιμο React έκδοση 18 hooks.

Πότε να χρησιμοποιήσετε Ποιο γάντζο;

Καθένα από τα παραπάνω άγκιστρα ανάκτησης δεδομένων είναι κατάλληλο για διαφορετικές καταστάσεις:

• Ανάκτηση δεδομένων: Το useEffect είναι μια εξαιρετική επιλογή.
• Άμεσοι χειρισμοί DOM: Εάν χρειάζεται να κάνετε σύγχρονες αλλαγές στο DOM πριν από μια νέα βαφή, επιλέξτε το useLayoutEffect.
• Ελαφριές λειτουργίες: Για λειτουργίες που δεν κινδυνεύουν να μπλοκάρουν τη διεπαφή χρήστη, μπορείτε να χρησιμοποιήσετε ελεύθερα το useEffect.
• Παρενέργειες λόγω συμβάντων: Χρησιμοποιήστε το άγκιστρο useEffectEvent για να τυλίξετε τα συμβάντα και το άγκιστρο useEffect για να εκτελέσετε τις παρενέργειες.

Αντιμετωπίστε αποτελεσματικά τις παρενέργειες

Τα άγκιστρα React ανοίγουν έναν κόσμο δυνατοτήτων και κατανοώντας τη διαφορά μεταξύ του useEffect, Τα άγκιστρα useLayoutEffect και useEffectEvent μπορούν να επηρεάσουν σημαντικά τον τρόπο με τον οποίο χειρίζεστε τις παρενέργειες και το DOM χειρισμός. Είναι σημαντικό να λάβετε υπόψη τις συγκεκριμένες απαιτήσεις και τις συνέπειες αυτών των αγκίστρων για να δημιουργήσετε εφαρμογές φιλικές προς το χρήστη.