Αποφύγετε την υπερφόρτωση του διακομιστή με περιττές κλήσεις λειτουργίας αναζήτησης και βελτιστοποιήστε την απόδοση της εφαρμογής σας χρησιμοποιώντας αυτήν την τεχνική.
Στο React, κατά την υλοποίηση της λειτουργίας αναζήτησης, ο χειριστής onChange καλεί τη συνάρτηση αναζήτησης κάθε φορά που ο χρήστης πληκτρολογεί μέσα στο πλαίσιο εισαγωγής. Αυτή η προσέγγιση μπορεί να προκαλέσει προβλήματα απόδοσης, ειδικά εάν πραγματοποιείτε κλήσεις API ή υποβάλλετε ερωτήματα στη βάση δεδομένων. Οι συχνές κλήσεις στη λειτουργία αναζήτησης ενδέχεται να υπερφορτώσουν τον διακομιστή ιστού, οδηγώντας σε σφάλματα ή μη απόκριση διεπαφής χρήστη. Το debouncing λύνει αυτό το πρόβλημα.
Τι είναι το Debouncing;
Συνήθως, υλοποιείτε τη λειτουργία αναζήτησης στο React καλώντας μια λειτουργία χειριστή onChange σε κάθε πάτημα πλήκτρων όπως φαίνεται παρακάτω:
import { useState } from"react";exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");const handleSearch = () => {
console.log("Search for:", searchTerm);
};const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
handleSearch();
};
return (
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Ενώ αυτό λειτουργεί, η κλήση στο backend για ενημέρωση των αποτελεσμάτων αναζήτησης σε κάθε πάτημα πλήκτρου μπορεί να είναι ακριβή. Για παράδειγμα, εάν αναζητούσατε "webdev", η εφαρμογή θα έστελνε ένα αίτημα στο backend με τις τιμές "w", "we", "web" και ούτω καθεξής.
Το Debouncing είναι μια τεχνική που λειτουργεί καθυστερώντας την εκτέλεση μιας συνάρτησης μέχρι να παρέλθει μια περίοδος καθυστέρησης. Η συνάρτηση αναπήδησης εντοπίζει κάθε φορά που ο χρήστης πληκτρολογεί και αποτρέπει την κλήση προς τον χειριστή αναζήτησης μέχρι να παρέλθει η καθυστέρηση. Εάν ο χρήστης συνεχίσει να πληκτρολογεί εντός της περιόδου καθυστέρησης, ο χρονοδιακόπτης επαναφέρεται και το React καλεί ξανά τη συνάρτηση για τη νέα καθυστέρηση. Αυτή η διαδικασία συνεχίζεται μέχρι ο χρήστης να σταματήσει την πληκτρολόγηση.
Περιμένοντας από τους χρήστες να διακόψουν την πληκτρολόγηση, το debouncing διασφαλίζει ότι η εφαρμογή σας κάνει μόνο τα απαραίτητα αιτήματα αναζήτησης, μειώνοντας έτσι τον φόρτο του διακομιστή.
Πώς να απενεργοποιήσετε την αναζήτηση στο React
Υπάρχουν πολλές βιβλιοθήκες που μπορείτε να χρησιμοποιήσετε για να εφαρμόσετε το debounce. Μπορείτε επίσης να επιλέξετε να το εφαρμόσετε μόνοι σας από την αρχή χρησιμοποιώντας JavaScript setTimeout και clearTimeout λειτουργίες.
Αυτό το άρθρο χρησιμοποιεί τη συνάρτηση αναπήδησης από τη βιβλιοθήκη του Lodash.
Υποθέτοντας ότι έχετε έτοιμο έργο React, δημιουργήστε ένα νέο στοιχείο που ονομάζεται Αναζήτηση. Εάν δεν έχετε ένα έργο που λειτουργεί, δημιουργήστε μια εφαρμογή React χρησιμοποιώντας το δημιουργήστε το βοηθητικό πρόγραμμα εφαρμογής React.
Στο Αναζήτηση αρχείο συστατικού, αντιγράψτε τον ακόλουθο κώδικα για να δημιουργήσετε ένα πλαίσιο εισαγωγής αναζήτησης που καλεί μια λειτουργία χειριστή σε κάθε πάτημα πλήκτρων.
import { useState } from"react";exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");const handleSearch = () => {
console.log("Search for:", searchTerm);
};const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
handleSearch();
};
return (
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Να αναπηδήσει το handleSearch λειτουργία, περάστε το στο αναπήδηση λειτουργία από lodash.
import debounce from"lodash.debounce";
import { useState } from"react";exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");const handleSearch = () => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 1000);const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
debouncedSearch();
};
return (
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Στο αναπήδηση συνάρτηση, περνάτε στη συνάρτηση που θέλετε να καθυστερήσετε, π.χ handleSearch λειτουργία και ο χρόνος καθυστέρησης σε χιλιοστά του δευτερολέπτου, δηλαδή 500 ms.
Ενώ ο παραπάνω κωδικός θα πρέπει να καθυστερήσει την κλήση στο handleSearch αίτημα μέχρι ο χρήστης να σταματήσει την πληκτρολόγηση, δεν λειτουργεί στο React. Θα εξηγήσουμε γιατί στην επόμενη ενότητα.
Debouncing και Rerenders
Αυτή η εφαρμογή χρησιμοποιεί μια ελεγχόμενη είσοδο. Αυτό σημαίνει ότι η τιμή κατάστασης ελέγχει την τιμή της εισόδου. κάθε φορά που ένας χρήστης πληκτρολογεί στο πεδίο αναζήτησης Το React ενημερώνει την κατάσταση.
Στο React, όταν αλλάζει μια τιμή κατάστασης, το React αποδίδει εκ νέου το στοιχείο και εκτελεί όλες τις λειτουργίες μέσα σε αυτό.
Στο παραπάνω στοιχείο αναζήτησης, όταν το στοιχείο αποδίδεται εκ νέου, το React εκτελεί τη συνάρτηση αναπήδησης. Η λειτουργία δημιουργεί ένα νέο χρονόμετρο που παρακολουθεί την καθυστέρηση και το παλιό χρονόμετρο βρίσκεται στη μνήμη. Όταν παρέλθει ο χρόνος του, ενεργοποιεί τη λειτουργία αναζήτησης. Αυτό σημαίνει ότι η λειτουργία αναζήτησης δεν απενεργοποιείται ποτέ, αλλά καθυστερεί κατά 500 ms. Αυτός ο κύκλος επαναλαμβάνεται σε κάθε απόδοση—η συνάρτηση δημιουργεί ένα νέο χρονόμετρο, το παλιό χρονόμετρο λήγει και μετά καλεί τη συνάρτηση αναζήτησης
Για να λειτουργήσει η λειτουργία debounce, πρέπει να την καλέσετε μόνο μία φορά. Μπορείτε να το κάνετε αυτό καλώντας τη συνάρτηση debounce εκτός του στοιχείου ή από χρησιμοποιώντας την τεχνική της απομνημόνευσης. Με αυτόν τον τρόπο, ακόμα κι αν το στοιχείο αναπαράγεται, το React δεν θα το εκτελέσει ξανά.
Καθορισμός της συνάρτησης Debounce εκτός του στοιχείου αναζήτησης
Μετακίνησε το αναπήδηση λειτουργία εκτός του Αναζήτηση συστατικό όπως φαίνεται παρακάτω:
import debounce from"lodash.debounce"const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);
Τώρα, στο Αναζήτηση συστατικό, κλήση debouncedSearch και περάστε στον όρο αναζήτησης.
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
debouncedSearch(searchTerm);
};
return (
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Η λειτουργία αναζήτησης θα καλείται μόνο αφού παρέλθει η περίοδος καθυστέρησης.
Απομνημόνευση της συνάρτησης Debounce
Η απομνημόνευση αναφέρεται στην προσωρινή αποθήκευση των αποτελεσμάτων μιας συνάρτησης και στην επαναχρησιμοποίησή τους όταν καλείτε τη συνάρτηση με τα ίδια ορίσματα.
Για να απομνημονεύσετε το αναπήδηση λειτουργία, χρησιμοποιήστε το useMemo άγκιστρο.
import debounce from"lodash.debounce";
import { useCallback, useMemo, useState } from"react";exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");const handleSearch = useCallback((searchTerm) => {
console.log("Search for:", searchTerm);
}, []);const debouncedSearch = useMemo(() => {
return debounce(handleSearch, 500);
}, [handleSearch]);const handleChange = (e) => {
setSearchTerm(e.target.value);
// Calls search function
debouncedSearch(searchTerm);
};
return (
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Σημειώστε ότι έχετε τυλίξει και το handleSearch λειτουργία σε α χρήση επιστροφής κλήσης συνδέστε για να διασφαλίσετε ότι το React θα το καλέσει μόνο μία φορά. Χωρίς το χρήση επιστροφής κλήσης hook, το React θα εκτελούσε το handleSearch λειτουργία με κάθε re-render κάνοντας τις εξαρτήσεις του useMemo αλλαγή γάντζου που με τη σειρά του θα καλούσε το αναπήδηση λειτουργία.
Τώρα, το React θα καλέσει μόνο το αναπήδηση λειτουργία εάν το handleSearch αλλάζει η λειτουργία ή ο χρόνος καθυστέρησης.
Βελτιστοποιήστε την αναζήτηση με Debounce
Μερικές φορές, η επιβράδυνση μπορεί να είναι καλύτερη για την απόδοση. Κατά τον χειρισμό εργασιών αναζήτησης, ειδικά με ακριβές κλήσεις βάσης δεδομένων ή API, η χρήση μιας συνάρτησης αναπήδησης είναι ο καλύτερος τρόπος. Αυτή η λειτουργία εισάγει μια καθυστέρηση πριν από την αποστολή αιτημάτων υποστήριξης.
Βοηθά στη μείωση του αριθμού των αιτημάτων που γίνονται στον διακομιστή, καθώς στέλνει το αίτημα μόνο αφού παρέλθει η καθυστέρηση και ο χρήστης έχει διακόψει την πληκτρολόγηση. Με αυτόν τον τρόπο, ο διακομιστής δεν υπερφορτώνεται με πάρα πολλά αιτήματα και η απόδοση παραμένει αποτελεσματική.