Избегайте перегрузки сервера ненужными вызовами функций поиска и оптимизируйте производительность вашего приложения с помощью этого метода.
В React при реализации функции поиска обработчик onChange вызывает функцию поиска каждый раз, когда пользователь вводит текст в поле ввода. Такой подход может вызвать проблемы с производительностью, особенно при вызовах API или запросах к базе данных. Частые вызовы функции поиска могут перегрузить веб-сервер, что приведет к сбоям или зависанию пользовательского интерфейса. Дебаунсинг решает эту проблему.
Что такое дебаунсинг?
Обычно вы реализуете функцию поиска в 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» и т. д.
Устранение дребезга — это метод, который работает путем задержки выполнения функции до тех пор, пока не истечет период задержки. Функция устранения дребезга обнаруживает каждый раз, когда пользователь вводит текст, и предотвращает вызов обработчика поиска до тех пор, пока не истечет задержка. Если пользователь продолжает печатать в течение периода задержки, таймер сбрасывается, и React снова вызывает функцию для новой задержки. Этот процесс продолжается до тех пор, пока пользователь не прекратит ввод текста.
Ожидая, пока пользователи приостановят ввод текста, устранение дребезга гарантирует, что ваше приложение будет выполнять только необходимые поисковые запросы, тем самым снижая нагрузку на сервер.
Как отменить поиск в React
Существует несколько библиотек, которые вы можете использовать для реализации устранения дребезга. Вы также можете реализовать его самостоятельно с нуля, используя JavaScript. setTimeout и ClearTimeout функции.
В этой статье используется функция устранения дребезга из библиотека Лодаш.
Предполагая, что у вас есть готовый проект 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..."
/>
);
}
Чтобы предотвратить handleПоиск функцию, передайте ее в отскакивать функция из 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..."
/>
);
}
в отскакивать функция, вы передаете функцию, которую хотите отложить, т.е. handleПоиск функция и время задержки в миллисекундах, т. е. 500 мс.
Хотя приведенный выше код должен задержать вызов handleПоиск запрашивать до тех пор, пока пользователь не прекратит ввод текста, в React это не работает. Мы объясним почему в следующем разделе.
Устранение дребезга и ререндеринг
Это приложение использует контролируемый ввод. Это означает, что значение состояния контролирует значение входа; каждый раз, когда пользователь вводит поле поиска, React обновляет состояние.
В React при изменении значения состояния React повторно отображает компонент и выполняет все функции внутри него.
В приведенном выше компоненте поиска при повторной визуализации компонента React выполняет функцию устранения дребезга. Функция создает новый таймер, который отслеживает задержку, а старый таймер сохраняется в памяти. По истечении времени он запускает функцию поиска. Это означает, что функция поиска никогда не прерывается, а задерживается на 500 мс. Этот цикл повторяется при каждом рендеринге — функция создает новый таймер, срок действия старого таймера истекает, а затем вызывается функция поиска.
Чтобы функция debounce работала, вам нужно вызвать ее только один раз. Вы можете сделать это, вызвав функцию устранения дребезга вне компонента или используя технику мемоизации. Таким образом, даже если компонент выполнит повторную визуализацию, React не выполнит его снова.
Определение функции устранения дребезга вне компонента поиска
Переместите отскакивать функционировать вне Поиск компонент, как показано ниже:
import debounce from"lodash.debounce"const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);
Теперь, в Поиск компонент, позвоните debouncedПоиск и введите поисковый запрос.
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..."
/>
);
}
Функция поиска будет вызвана только по истечении периода задержки.
Запоминание функции устранения дребезга
Запоминание означает кэширование результатов функции и их повторное использование при вызове функции с теми же аргументами.
Чтобы запомнить отскакивать функцию, используйте использоватьMemo крюк.
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..."
/>
);
}
Обратите внимание, что вы также обернули handleПоиск функционировать в использовать обратный вызов перехватчик, чтобы React вызывал его только один раз. Без использовать обратный вызов хук, React выполнит handleПоиск функция с каждым повторным рендерингом, создающим зависимости использоватьMemo смена крючка, которая, в свою очередь, вызовет отскакивать функция.
Теперь React будет вызывать только отскакивать функция, если handleПоиск функция или время задержки изменится.
Оптимизация поиска с помощью Debounce
Иногда замедление может быть лучше для производительности. При решении задач поиска, особенно с дорогостоящими вызовами базы данных или API, лучше всего использовать функцию устранения дребезга. Эта функция вводит задержку перед отправкой серверных запросов.
Это помогает сократить количество запросов к серверу, поскольку он отправляет запрос только после того, как истечет задержка и пользователь приостановил ввод текста. Таким образом, сервер не перегружается слишком большим количеством запросов, а производительность остается эффективной.
