Hogyan lehet javítani a keresési teljesítményt a React With Debouncing segítségével

A React-ban a keresési funkció implementálásakor az onChange kezelő minden alkalommal meghívja a keresési funkciót, amikor a felhasználó gépel a beviteli mezőbe. Ez a megközelítés teljesítményproblémákat okozhat, különösen API-hívások kezdeményezése vagy az adatbázis lekérdezése esetén. A keresési funkció gyakori hívása túlterhelheti a webszervert, ami összeomláshoz vagy nem reagáló felhasználói felülethez vezethet. A visszapattanás megoldja ezt a problémát.

Mi az a visszapattanás?

Általában úgy valósítja meg a React keresési funkcióját, hogy minden billentyűleütéskor meghív egy onChange kezelő függvényt, az alábbiak szerint:

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();
 };





instagram viewer
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Míg ez működik, a háttérprogram hívása a keresési eredmények frissítésére minden billentyűlenyomáskor költséges lehet. Például, ha a „webdev” kifejezésre keres, az alkalmazás kérést küld a háttérrendszernek a „w”, „we”, „web” stb. értékekkel.

A visszapattanás egy olyan technika, amely egy függvény végrehajtásának késleltetésével működik, amíg egy késleltetési időszak le nem telik. A debounce funkció minden alkalommal észlel, amikor a felhasználó gépel, és megakadályozza a keresést kezelő hívást, amíg a késleltetés le nem telik. Ha a felhasználó a késleltetési időn belül folytatja a gépelést, az időzítő alaphelyzetbe áll, és a React újra meghívja a funkciót az új késleltetésért. Ez a folyamat addig folytatódik, amíg a felhasználó szünetelteti a gépelést.

Azáltal, hogy megvárja a felhasználókat a gépelés szüneteltetésére, a visszapattanás biztosítja, hogy az alkalmazás csak a szükséges keresési kéréseket hajtsa végre, ezáltal csökkentve a szerver terhelését.

Hogyan lehet visszautasítani a keresést a Reactban

Számos könyvtár használható a debounce megvalósításához. Dönthet úgy is, hogy saját maga implementálja a semmiből a JavaScript használatával setTimeout és clearTimeout funkciókat.

Ez a cikk a debounce függvényt használja a lodash könyvtár.

Feltéve, hogy készen áll egy React projekt, hozzon létre egy új komponenst Keresés. Ha nincs működő projektje, hozzon létre egy React alkalmazást a hozzon létre React alkalmazás segédprogramot.

Ban,-ben Keresés komponens fájlt, másolja ki a következő kódot egy olyan keresési beviteli mező létrehozásához, amely minden billentyűleütéskor meghív egy kezelő függvényt.

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

Hogy visszaverje a handleSearch függvényt, adja át a lepattanó függvény a lodash-ból.

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

Ban,-ben lepattanó függvényt, akkor átadja azt a függvényt, amelyet késleltetni szeretne, azaz a handleSearch függvényt, és a késleltetési időt ezredmásodpercben, azaz 500 ms-ban.

Míg a fenti kódnak késleltetnie kell a hívást a handleSearch kérést, amíg a felhasználó szünetelteti a gépelést, ez nem működik a Reactban. A következő részben elmagyarázzuk, miért.

Visszapattanás és újrarenderelés

Ez az alkalmazás vezérelt bemenetet használ. Ez azt jelenti, hogy az állapotérték szabályozza a bemenet értékét; minden alkalommal, amikor a felhasználó beír a keresőmezőbe, a React frissíti az állapotot.

A React alkalmazásban, amikor egy állapotérték megváltozik, a React újrarendereli az összetevőt, és végrehajtja a benne lévő összes funkciót.

A fenti keresési komponensben, amikor a komponens újra rendereli, a React végrehajtja a debounce funkciót. A funkció létrehoz egy új időzítőt, amely nyomon követi a késleltetést, és a régi időzítő ül a memóriában. Ha letelik az ideje, elindítja a keresési funkciót. Ez azt jelenti, hogy a keresési funkció soha nem lép vissza, hanem 500 ms-kal késik. Ez a ciklus minden megjelenítésnél megismétlődik – a függvény létrehoz egy új időzítőt, a régi időzítő lejár, majd meghívja a keresési funkciót

A debounce függvény működéséhez csak egyszer kell meghívnia. Ezt megteheti a debounce függvény meghívásával a komponensen kívül vagy a segítségével memoizációs technikával. Így a React még akkor sem hajtja végre újra, ha az összetevő újrarenderelődik.

A Debounce függvény meghatározása a keresési komponensen kívül

Mozdítsd meg a lepattanó funkción kívül Keresés komponens az alábbiak szerint:

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

Most, a Keresés komponens, hívás debouncedSearch és adja meg a keresett kifejezést.

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

A keresési funkció csak a késleltetési idő letelte után kerül meghívásra.

A Debounce függvény memorizálása

A memorizálás egy függvény eredményeinek gyorsítótárazását és újrafelhasználását jelenti, amikor a függvényt ugyanazokkal az argumentumokkal hívja meg.

Megjegyezni a lepattanó funkciót, használja a useMemo horog.

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

Vegye figyelembe, hogy Ön is becsomagolta a handleSearch funkció a használja a visszahívást horog, hogy a React csak egyszer hívja meg. Anélkül, hogy a használja a visszahívást horog, React végrehajtaná a handleSearch függvényt minden újrarendereléssel, amely a függőségeket hozza létre useMemo horogcsere ami viszont a lepattanó funkció.

Most a React csak a lepattanó funkció, ha a handleSearch funkció vagy a késleltetési idő megváltozik.

Optimalizálja a keresést a Debounce segítségével

Néha a lassítás jobb lehet a teljesítmény szempontjából. Keresési feladatok kezelésekor, különösen drága adatbázis- vagy API-hívások esetén, a debounce függvény használata a helyes út. Ez a funkció késleltetést vezet be a háttérkérések elküldése előtt.

Segít csökkenteni a szerverhez intézett kérések számát, mivel csak a késleltetés letelte után küldi el a kérést, és a felhasználó szünetelteti a gépelést. Így a szerver nem lesz túl sok kéréssel túlterhelve, és a teljesítmény hatékony marad.