Как улучшить поиск в React с помощью Debouncing

Debouncing поможет вам избежать перегрузки сервера и оптимизировать производительность приложений. Ниже приведены подробные инструкции.

В React при реализации функции поиска обработчик onChange вызывает функцию поиска каждый раз, когда пользователь вводит текст в поле ввода. Этот метод может вызвать ошибки производительности, особенно при выполнении вызовов API или запросов к базе данных. Частые вызовы функции поиска могут перегрузить веб-сервер, в результате чего пользовательский интерфейс перестанет отвечать на запросы. Дебаунсинг решит эту проблему.

Что такое дебаунсинг?

В частности, вы реализуете функцию поиска в React, вызывая функцию-обработчик onChange при каждом нажатии клавиши следующим образом:

импортировать {useState} из «реагировать»; экспортировать функцию по умолчанию Search() { const (searchTerm, setSearchTerm) = useState(“”); const handleSearch = () => { console.log(“Искать:”, searchTerm); }; const handleChange = (e) => { setSearchTerm(e.target.value); // Вызывает функцию поиска handleSearch(); }; возвращаться ( ); }

Хотя приведенный выше код работает, вызов бэкэнда для обновления результатов поиска при каждом нажатии клавиши может оказаться дорогостоящим. Например, если вы ищете «webdev», приложение отправит запрос на серверную часть со значениями «w», «мы», «web» и т. д.

Устранение дребезга — это метод, который работает путем задержки выполнения функции до истечения срока задержки. Функция устранения дребезга обнаруживает каждое нажатие клавиши пользователем и предотвращает вызовы обработчика поиска до истечения задержки. Если пользователь продолжает печатать во время задержки, таймер сбрасывается, и React снова вызывает функцию для новой задержки. Этот процесс продолжается до тех пор, пока пользователь не перестанет печатать.

Ожидая, пока пользователь приостановит ввод текста, устранение дребезжания гарантирует, что приложение выполняет только необходимые поисковые запросы, тем самым снижая нагрузку на сервер.

Как отменить поиск в React

Существует несколько библиотек, которые вы можете использовать для реализации устранения дребезга. Вы также можете реализовать его самостоятельно с нуля, используя функции JavaScript setTimeout иclearTimeout.

В этой статье используется функция debounce из библиотеки lodash. Предполагая, что у вас есть существующий проект React, создайте новый компонент с именем Search. Если у вас еще нет активного проекта, создайте приложение React, используя create-react-app.

В файле компонента поиска скопируйте следующий код, чтобы создать поле ввода поиска, которое вызывает функцию-обработчик при каждом нажатии клавиши.

импортировать {useState} из «реагировать»; экспортировать функцию по умолчанию Search() { const (searchTerm, setSearchTerm) = useState(“”); const handleSearch = () => { console.log(“Искать:”, searchTerm); }; const handleChange = (e) => { setSearchTerm(e.target.value); // Вызывает функцию поиска handleSearch(); }; возвращаться ( ); }

Чтобы устранить дребезг функции handleSearch, преобразуйте ее в функцию debounce из lodash.

импортировать откат из «lodash.debounce»; импортировать {useState} из «реагировать»; экспортировать функцию по умолчанию Search() { const (searchTerm, setSearchTerm) = useState(“”); const handleSearch = () => { console.log(“Искать:”, searchTerm); }; const debouncedSearch = debounce(handleSearch, 1000); const handleChange = (e) => { setSearchTerm(e.target.value); // Вызывает функцию поиска debouncedSearch(); }; возвращаться ( ); }

В функции устранения дребезга вы передаете функцию, которую хотите задержать, например handleSearch, время задержки составляет миллисекунды, например 500 мс.

Хотя приведенный выше код будет задерживать вызов запроса handleSearch до тех пор, пока пользователь не прекратит ввод текста, он не работает в React.

Устранение дребезга и рендеринг

Это приложение использует контроль ввода. Это означает, что значение состояния контролирует входное значение. Каждый раз, когда пользователь входит в поле поиска, React обновляет это состояние.

В React, когда значение состояния изменяется, React показывает компонент и реализует все функции внутри него.

В приведенном выше компоненте поиска при повторной визуализации компонента React запускает функцию устранения дребезга. Эта функция создает новый секундомер, постоянно контролирует задержку, а старый секундомер остается в памяти. По истечении времени таймера активируется функция поиска. Это означает, что функция поиска никогда не прерывается, она задерживается примерно на 500 мс. Этот цикл повторяется при каждом рендеринге — функция создает новый таймер, срок действия старого истекает, затем она вызывает функцию поиска.

Чтобы функция debounce работала, вам нужно вызвать ее только один раз. Вы можете сделать это, вызвав функцию устранения дребезга вне компонента или используя мнемонику. Таким образом, даже если компонент виден, React не запустит его снова.

Определите функцию устранения дребезга вне компонента поиска.

Переместите функцию устранения дребезга за пределы элемента поиска, как показано ниже:

импортировать откат из “lodash.debounce” const handleSearch = (searchTerm) => { console.log(“Искать:”, searchTerm); }; const debouncedSearch = debounce(handleSearch, 500);

Теперь в компоненте поиска вызовите debouncedSearch и передайте ему поисковый запрос.

экспортировать функцию по умолчанию Search() { const (searchTerm, setSearchTerm) = useState(“”); const handleChange = (e) => { setSearchTerm(e.target.value); // Вызывает функцию поиска debouncedSearch(searchTerm); }; возвращаться ( ); }

Эта функция поиска будет вызвана только после окончания периода задержки.

Запоминание функции Debounce

Запоминание означает сохранение результатов функции и их повторное использование при вызове функции с теми же аргументами.

Чтобы запомнить функцию debounce, используйте хук useMemo.

импортировать откат из «lodash.debounce»; импортировать {useCallback, useMemo, useState} из «реагировать»; экспортировать функцию по умолчанию Search() { const (searchTerm, setSearchTerm) = useState(“”); const handleSearch = useCallback((searchTerm) => { console.log(“Искать:”, searchTerm); }, ()); const debouncedSearch = useMemo(() => { return debounce(handleSearch, 500); }, (handleSearch)); const handleChange = (e) => { setSearchTerm(e.target.value); // Вызывает функцию поиска debouncedSearch(searchTerm); }; возвращаться ( ); }

Обратите внимание, что вы также оборачиваете функцию handleSearch в хук useCallback, чтобы React вызывал ее только один раз. Без хука useCallback React запускал бы функцию handleSearch при каждом повторном рендеринге, вызывая изменение зависимостей хука useMemo, что, в свою очередь, вызывало бы функцию debounce.

Теперь React будет вызывать функцию устранения дребезга только в случае изменения handleSearch или задержки.

Короче говоря, debounce поможет программистам сократить количество запросов к серверу, поскольку он отправляет запросы только после того, как истечет задержка и пользователь приостановил ввод текста. Благодаря этому сервер не перегружается и производительность приложений повышается.

В приведенной выше статье вы познакомились с «Как улучшить поиск в React с помощью Debouncing». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!