Kako izboljšati uspešnost iskanja v Reactu z odstranjevanjem odbojev

V Reactu pri implementaciji iskalne funkcije upravljalnik onChange pokliče iskalno funkcijo vsakič, ko uporabnik vnese v vnosno polje. Ta pristop lahko povzroči težave z zmogljivostjo, zlasti če opravljate klice API ali poizvedujete po bazi podatkov. Pogosti klici iskalne funkcije lahko preobremenijo spletni strežnik, kar povzroči zrušitve ali neodzivnost uporabniškega vmesnika. Odboj rešuje ta problem.

Kaj je debouncing?

Značilno je, da funkcijo iskanja v Reactu implementirate tako, da pokličete funkcijo obravnave onChange ob vsakem pritisku tipke, kot je prikazano spodaj:

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..."
 />
 );
}

Čeprav to deluje, je lahko klic v ozadju za posodobitev rezultatov iskanja ob vsakem pritisku tipke drag. Če bi na primer iskali »webdev«, bi aplikacija v zaledje poslala zahtevo z vrednostmi »w«, »we«, »web« itd.

Debouncing je tehnika, ki deluje tako, da zakasni izvajanje funkcije, dokler ne poteče obdobje zakasnitve. Funkcija odboja zazna vsakič, ko uporabnik tipka, in prepreči klic upravljalniku iskanja, dokler ne poteče zakasnitev. Če uporabnik nadaljuje s tipkanjem v obdobju zakasnitve, se časovnik ponastavi in ​​React ponovno pokliče funkcijo za novo zakasnitev. Ta postopek se nadaljuje, dokler uporabnik ne ustavi tipkanja.

S čakanjem, da uporabniki začasno ustavi tipkanje, debouncing zagotovi, da vaša aplikacija izvede samo potrebne iskalne zahteve in tako zmanjša obremenitev strežnika.

Kako odpraviti odboj pri iskanju v Reactu

Obstaja več knjižnic, ki jih lahko uporabite za implementacijo odboja. Lahko se tudi odločite, da ga sami implementirate iz nič z uporabo JavaScripta setTimeout in clearTimeout funkcije.

Ta članek uporablja funkcijo odboja iz knjižnica lodash.

Ob predpostavki, da imate pripravljen projekt React, ustvarite novo komponento, imenovano Iskanje. Če nimate delujočega projekta, ustvarite aplikacijo React z uporabo ustvarite pripomoček aplikacije React.

V Iskanje komponentno datoteko, kopirajte naslednjo kodo, da ustvarite iskalno vnosno polje, ki pri vsakem pritisku tipke kliče funkcijo obravnave.

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 odbijanje handleSearch funkcijo, jo posredujte v debounce funkcija iz 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..."
 />
 );
}

V debounce funkcijo, posredujete funkcijo, ki jo želite odložiti, tj handleSearch funkcijo in čas zakasnitve v milisekundah, tj. 500 ms.

Medtem ko bi morala zgornja koda odložiti klic na handleSearch zahteva, dokler uporabnik ne ustavi tipkanja, v Reactu ne deluje. V naslednjem razdelku bomo pojasnili, zakaj.

Odbijanje in vnovično upodabljanje

Ta aplikacija uporablja nadzorovan vnos. To pomeni, da vrednost stanja nadzira vrednost vnosa; vsakič, ko uporabnik vnese v iskalno polje, React posodobi stanje.

V Reactu, ko se vrednost stanja spremeni, React ponovno upodobi komponento in izvede vse funkcije v njej.

V zgornji iskalni komponenti, ko se komponenta znova upodablja, React izvede funkcijo odboja. Funkcija ustvari nov časovnik, ki spremlja zakasnitev, stari časovnik pa se shrani v pomnilnik. Ko ta čas poteče, sproži funkcijo iskanja. To pomeni, da funkcija iskanja ni nikoli zavrnjena, ampak ima zakasnitev 500 ms. Ta cikel se ponovi ob vsakem upodabljanju— funkcija ustvari nov časovnik, stari časovnik poteče in nato pokliče iskalno funkcijo

Da funkcija debounce deluje, jo morate poklicati samo enkrat. To lahko storite tako, da pokličete funkcijo debounce zunaj komponente ali z z uporabo tehnike memoizacije. Na ta način, tudi če se komponenta ponovno upodobi, je React ne bo znova izvedel.

Definiranje funkcije odboja zunaj iskalne komponente

Premakni debounce funkcijo zunaj Iskanje komponento, kot je prikazano spodaj:

import debounce from"lodash.debounce"
const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);

Zdaj, v Iskanje komponenta, klic debouncedSearch in podate iskalni izraz.

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 iskanja bo priklicana šele po preteku obdobja zakasnitve.

Shranjevanje v spomin funkcije Debounce

Memoizing se nanaša na predpomnjenje rezultatov funkcije in njihovo ponovno uporabo, ko pokličete funkcijo z istimi argumenti.

Da si zapomnite debounce funkcijo, uporabite useMemo kavelj.

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..."
 />
 );
}

Upoštevajte, da ste tudi zavili handleSearch funkcija v a useCallback hook, da zagotovite, da ga React pokliče samo enkrat. Brez useCallback hook, bi React izvedel handleSearch funkcijo z vsakim ponovnim upodabljanjem, ki naredi odvisnosti od useMemo menjava kljuke, ki bi posledično imenovala debounce funkcijo.

Zdaj bo React poklical samo debounce funkcijo, če handleSearch ali pa se spremeni čas zakasnitve.

Optimizirajte iskanje z Debounce

Včasih je upočasnitev lahko boljša za učinkovitost. Pri opravljanju iskalnih nalog, zlasti pri dragih klicih baze podatkov ali API-jev, je prava pot uporaba funkcije za odbijanje. Ta funkcija uvaja zakasnitev pred pošiljanjem zalednih zahtev.

Pomaga zmanjšati število zahtev, poslanih strežniku, saj zahtevo pošlje šele po preteku zakasnitve in uporabniku prekine tipkanje. Na ta način strežnik ni preobremenjen s preveč zahtevami, zmogljivost pa ostane učinkovita.