Unikaj przeciążania serwera niepotrzebnymi wywołaniami funkcji wyszukiwania i optymalizuj wydajność aplikacji, korzystając z tej techniki.
W React, podczas implementowania funkcji wyszukiwania, procedura obsługi onChange wywołuje funkcję wyszukiwania za każdym razem, gdy użytkownik wpisze tekst w polu wprowadzania. Takie podejście może powodować problemy z wydajnością, szczególnie w przypadku wykonywania wywołań API lub wysyłania zapytań do bazy danych. Częste wywołania funkcji wyszukiwania mogą przeciążać serwer WWW, powodując awarie lub brak reakcji interfejsu użytkownika. Odbijanie rozwiązuje ten problem.
Co to jest debouncing?
Zwykle implementujesz funkcję wyszukiwania w React, wywołując funkcję obsługi onChange przy każdym naciśnięciu klawisza, jak pokazano poniżej:
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..."
/>
);
}
Chociaż to działa, wywołanie zaplecza w celu aktualizacji wyników wyszukiwania przy każdym naciśnięciu klawisza może być kosztowne. Na przykład, jeśli szukasz „webdev”, aplikacja wyśle żądanie do backendu z wartościami „w”, „we”, „web” i tak dalej.
Odbijanie to technika polegająca na opóźnianiu wykonania funkcji do momentu upłynięcia okresu opóźnienia. Funkcja odrzucania wykrywa za każdym razem, gdy użytkownik napisze i zapobiega wywołaniu modułu obsługi wyszukiwania do momentu upłynięcia opóźnienia. Jeśli użytkownik będzie kontynuował pisanie w określonym czasie, licznik czasu zostanie zresetowany, a React ponownie wywoła funkcję z nowym opóźnieniem. Proces ten trwa, dopóki użytkownik nie przestanie pisać.
Czekając, aż użytkownicy przestaną pisać, odrzucanie zapewnia, że aplikacja wysyła tylko niezbędne żądania wyszukiwania, zmniejszając w ten sposób obciążenie serwera.
Jak odrzucić wyszukiwanie w React
Istnieje kilka bibliotek, których można użyć do zaimplementowania debounce. Możesz także wdrożyć go samodzielnie od podstaw, korzystając z JavaScript ustaw limit czasu I wyczyśćLimit czasu Funkcje.
W tym artykule użyto funkcji odrzucania z biblioteka Lodash.
Zakładając, że masz gotowy projekt React, utwórz nowy komponent o nazwie Szukaj. Jeśli nie masz działającego projektu, utwórz aplikację React za pomocą utwórz narzędzie aplikacji React.
w Szukaj komponentu, skopiuj poniższy kod, aby utworzyć pole wprowadzania wyszukiwania, które wywołuje funkcję obsługi przy każdym naciśnięciu klawisza.
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..."
/>
);
}
Aby odrzucić uchwytSzukaj funkcję, przekaż ją do Obalić funkcja z 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..."
/>
);
}
w Obalić funkcję, przekazujesz funkcję, którą chcesz opóźnić, tj uchwytSzukaj funkcji oraz czas opóźnienia w milisekundach, tj. 500 ms.
Chociaż powyższy kod powinien opóźniać wywołanie metody uchwytSzukaj request, dopóki użytkownik nie przestanie pisać, nie działa to w React. Wyjaśnimy dlaczego w poniższej sekcji.
Odbijanie i ponowne renderowanie
Ta aplikacja wykorzystuje kontrolowane wejście. Oznacza to, że wartość stanu kontroluje wartość wejścia; za każdym razem, gdy użytkownik wpisze w polu wyszukiwania, React aktualizuje stan.
W React, gdy zmienia się wartość stanu, React ponownie renderuje komponent i wykonuje wszystkie zawarte w nim funkcje.
W powyższym komponencie wyszukiwania, gdy komponent zostanie ponownie wyrenderowany, React wykonuje funkcję odrzucania. Funkcja tworzy nowy timer, który śledzi opóźnienie, a stary timer jest przechowywany w pamięci. Po upływie czasu uruchamia funkcję wyszukiwania. Oznacza to, że funkcja wyszukiwania nigdy nie jest odrzucana, jest opóźniona o 500 ms. Cykl ten powtarza się przy każdym renderowaniu — funkcja tworzy nowy licznik czasu, stary licznik czasu wygasa, a następnie wywołuje funkcję wyszukiwania
Aby funkcja odbicia zadziałała, musisz ją wywołać tylko raz. Można to zrobić wywołując funkcję debounce poza komponentem lub przez stosując technikę zapamiętywania. W ten sposób, nawet jeśli komponent zostanie ponownie wyrenderowany, React nie wykona go ponownie.
Definiowanie funkcji odbijania poza komponentem wyszukiwania
Przesuń Obalić funkcjonować poza Szukaj komponent jak pokazano poniżej:
import debounce from"lodash.debounce"const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);
Teraz w Szukaj składnik, zadzwoń odrzucone wyszukiwanie i podaj wyszukiwane hasło.
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..."
/>
);
}
Funkcja wyszukiwania zostanie wywołana dopiero po upływie okresu opóźnienia.
Zapamiętywanie funkcji odbicia
Zapamiętywanie oznacza buforowanie wyników funkcji i ponowne ich wykorzystywanie podczas wywoływania funkcji z tymi samymi argumentami.
Aby zapamiętać Obalić funkcję, użyj funkcji użyj Notatki hak.
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..."
/>
);
}
Zauważ, że również zawinąłeś plik uchwytSzukaj funkcjonować w A użyj funkcji oddzwaniania hook, aby mieć pewność, że React wywoła go tylko raz. Bez użyj funkcji oddzwaniania hak, React wykona uchwytSzukaj funkcja przy każdym ponownym renderowaniu, tworząc zależności użyj Notatki zmiana haka, co z kolei wywołałoby metodę Obalić funkcjonować.
Teraz React będzie wywoływał tylko metodę Obalić funkcja, jeśli uchwytSzukaj funkcji lub zmieni się czas opóźnienia.
Zoptymalizuj wyszukiwanie za pomocą Debounce
Czasami spowolnienie może być lepsze dla wydajności. Podczas obsługi zadań wyszukiwania, szczególnie w przypadku kosztownych wywołań baz danych lub API, najlepszym rozwiązaniem jest użycie funkcji odrzucania. Ta funkcja wprowadza opóźnienie przed wysłaniem żądań zaplecza.
Pomaga zmniejszyć liczbę żądań kierowanych do serwera, ponieważ wysyła żądanie dopiero po upływie opóźnienia i przerwaniu pisania przez użytkownika. W ten sposób serwer nie zostanie przeciążony zbyt dużą liczbą żądań, a wydajność pozostanie wydajna.
