Избягвайте претоварването на сървъра с ненужни извиквания на функции за търсене и оптимизирайте производителността на приложението си с помощта на тази техника.
В 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..."
/>
);
}
Въпреки че това работи, извикването към бекенда за актуализиране на резултатите от търсенето при всяко натискане на клавиш може да бъде скъпо. Например, ако търсите „webdev“, приложението ще изпрати заявка до бекенда със стойностите „w“, „we“, „web“ и т.н.
Debouncing е техника, която работи чрез забавяне на изпълнението на функция до изтичане на период на забавяне. Функцията за отблъскване разпознава всеки път, когато потребителят въвежда, и предотвратява извикването на манипулатора за търсене, докато не изтече закъснението. Ако потребителят продължи да въвежда в рамките на периода на забавяне, таймерът се нулира и React извиква отново функцията за новото забавяне. Този процес продължава, докато потребителят спре да пише.
Като изчаква потребителите да спрат въвеждането на пауза, премахването на отскок гарантира, че вашето приложение прави само необходимите заявки за търсене, като по този начин намалява натоварването на сървъра.
Как да дебоунсирате търсенето в React
Има няколко библиотеки, които можете да използвате за прилагане на debounce. Можете също да изберете да го внедрите сами от нулата, като използвате JavaScript setTimeout и clearTimeout функции.
Тази статия използва функцията debounce от библиотеката на 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. Ще обясним защо в следващия раздел.
Отстраняване на отскок и повторно изобразяване
Това приложение използва контролиран вход. Това означава, че стойността на състоянието контролира стойността на входа; всеки път, когато потребител въведе в полето за търсене, 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 функция в a useCallback кука, за да гарантира, че React го извиква само веднъж. Без useCallback кука, React ще изпълни handleSearch функция с всяко повторно изобразяване, което прави зависимостите на useMemo промяна на куката, което от своя страна ще нарече отскачане функция.
Сега React ще извика само отскачане функция, ако handleSearch функция или времето на забавяне се променя.
Оптимизирайте търсенето с Debounce
Понякога забавянето може да бъде по-добро за ефективността. Когато се справяте със задачи за търсене, особено със скъпи извиквания на база данни или API, използването на функция за премахване на отскок е правилният начин. Тази функция въвежда забавяне преди изпращане на задните заявки.
Той помага да се намали броят на заявките, отправени към сървъра, тъй като изпраща заявката само след изтичане на закъснението и потребителят е поставил на пауза въвеждането. По този начин сървърът не се претоварва с твърде много заявки и производителността остава ефективна.
