Izbjegnite preopterećenje poslužitelja nepotrebnim pozivima funkcija pretraživanja i optimizirajte izvedbu svoje aplikacije pomoću ove tehnike.
U Reactu, prilikom implementacije funkcije pretraživanja, rukovatelj onChange poziva funkciju pretraživanja svaki put kada korisnik upiše unutar okvira za unos. Ovaj pristup može uzrokovati probleme s izvedbom, osobito ako se upućuju API pozivi ili postavljaju upiti bazi podataka. Česti pozivi funkciji pretraživanja mogu preopteretiti web poslužitelj, što može dovesti do padova ili nereagiranja korisničkog sučelja. Debouncing rješava ovaj problem.
Što je debouncing?
Obično implementirate funkciju pretraživanja u Reactu pozivanjem funkcije rukovatelja onChange pri svakom pritisku tipke kao što je prikazano u nastavku:
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..."
/>
);
}
Iako ovo radi, poziv pozadini za ažuriranje rezultata pretraživanja pri svakom pritisku tipke može biti skup. Na primjer, ako ste tražili "webdev", aplikacija bi poslala zahtjev pozadini s vrijednostima "w", "we", "web" i tako dalje.
Debouncing je tehnika koja funkcionira tako da odgađa izvršenje funkcije dok ne istekne razdoblje odgode. Funkcija odbijanja detektira svaki put kada korisnik tipka i sprječava poziv obrađivaču pretraživanja dok ne istekne odgoda. Ako korisnik nastavi tipkati unutar razdoblja odgode, mjerač vremena se resetira i React ponovno poziva funkciju za novu odgodu. Ovaj proces se nastavlja sve dok korisnik ne zaustavi tipkanje.
Čekajući da korisnici zaustave tipkanje, debouncing osigurava da vaša aplikacija šalje samo potrebne zahtjeve za pretraživanje, čime se smanjuje opterećenje poslužitelja.
Kako odbiti pretraživanje u Reactu
Postoji nekoliko biblioteka koje možete koristiti za implementaciju odbijanja odbijanja. Također možete izabrati da ga sami implementirate od nule koristeći JavaScript setTimeout i clearTimeout funkcije.
Ovaj članak koristi funkciju odbijanja iz knjižnica lodash.
Pod pretpostavkom da imate spreman React projekt, stvorite novu komponentu pod nazivom traži. Ako nemate radni projekt, izradite React aplikaciju pomoću stvoriti uslužni program aplikacije React.
u traži komponentnu datoteku, kopirajte sljedeći kod za stvaranje okvira za unos pretraživanja koji poziva funkciju rukovatelja pri svakom pritisku tipke.
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..."
/>
);
}
Za uklanjanje odbijanja handleSearch funkciju, proslijedite je u debounce funkcija od 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..."
/>
);
}
u debounce funkciju, prosljeđujete funkciju koju želite odgoditi, tj handleSearch funkciju, a vrijeme odgode u milisekundama tj. 500 ms.
Dok bi gornji kod trebao odgoditi poziv na handleSearch zahtjev dok korisnik ne zaustavi tipkanje, ne radi u Reactu. Objasnit ćemo zašto u sljedećem odjeljku.
Otklanjanje odbijanja i ponovno renderiranje
Ova aplikacija koristi kontrolirani unos. To znači da vrijednost stanja kontrolira vrijednost ulaza; svaki put kada korisnik upiše u polje za pretraživanje React ažurira stanje.
U Reactu, kada se promijeni vrijednost stanja, React ponovno renderira komponentu i izvršava sve funkcije unutar nje.
U gornjoj komponenti pretraživanja, kada se komponenta ponovno renderira, React izvršava funkciju odbijanja. Funkcija stvara novi mjerač vremena koji prati odgodu, a stari mjerač vremena ostaje u memoriji. Kada mu vrijeme istekne, aktivira funkciju pretraživanja. To znači da se funkcija pretraživanja nikada ne odbija, nego kasni 500 ms. Ovaj se ciklus ponavlja pri svakom iscrtavanju— funkcija stvara novi mjerač vremena, stari mjerač vremena istječe i zatim poziva funkciju pretraživanja
Da bi funkcija debounce radila, morate je pozvati samo jednom. To možete učiniti pozivom funkcije debounce izvan komponente ili pomoću pomoću tehnike memoizacije. Na ovaj način, čak i ako se komponenta ponovno renderira, React je neće ponovno izvršiti.
Definiranje funkcije odbijanja izvan tražilice
Pomakni debounce funkcija izvan traži komponenta kao što je prikazano u nastavku:
import debounce from"lodash.debounce"const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);
Sada, u traži komponenta, poziv debouncedSearch i unesite traženi pojam.
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..."
/>
);
}
Funkcija traženja bit će pozvana tek nakon što istekne razdoblje odgode.
Memoriranje funkcije debounce
Memoriranje se odnosi na spremanje u predmemoriju rezultata funkcije i njihovo ponovno korištenje kada pozovete funkciju s istim argumentima.
Za memoriranje debounce funkciju, koristite useMemo kuka.
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..."
/>
);
}
Imajte na umu da ste također omotali handleSearch funkcija u a useCallback kuka kako bi se osiguralo da ga React pozove samo jednom. Bez toga useCallback kuka, React bi izvršio handleSearch funkcionirati sa svakim ponovnim renderiranjem praveći ovisnosti o useMemo promjena kuke koja bi zauzvrat nazvala debounce funkcija.
Sada će React pozvati samo debounce funkcija ako je handleSearch funkcija ili se vrijeme odgode mijenja.
Optimizirajte pretraživanje uz Debounce
Ponekad usporavanje može biti bolje za performanse. Prilikom rukovanja zadacima pretraživanja, osobito sa skupim pozivima baze podataka ili API-ja, upotreba funkcije za uklanjanje odbijanja je pravi put. Ova funkcija uvodi odgodu prije slanja pozadinskih zahtjeva.
Pomaže u smanjenju broja zahtjeva upućenih poslužitelju, budući da zahtjev šalje tek nakon što je odgoda istekla i korisnik je pauzirao tipkanje. Na ovaj način poslužitelj se ne opterećuje s previše zahtjeva, a performanse ostaju učinkovite.