Устранение дребезга в Javascript — эффективный метод повышения производительности браузера. Это трудоемкие вычисления, поэтому они могут часто вызываться или ухудшаться. Практика программирования Debouncing, основанная на Debouncing, является подходящим вариантом для выполнения трудоемких задач. Обычно этот процесс является удобным вариантом для ограничения количества вызываемых функций во время прохождения.
Что такое функция отката?
Функция Debounce или debounce() В Reactjs в основном заставляет функцию останавливаться во время ее выполнения. Функция Debounce() предназначена для ограничения или уменьшения количества их вызовов.
Наличие лучших сервисов по разработке React js было бы подходящим вариантом для эффективного улучшения стабильных результатов. Это также подходящий вариант для ограничения количества вызовов функций.
Как может быть полезен отказ в Reactjs?
Debounce In Reactjs — довольно полезный процесс, в основном обеспечивающий вам практические преимущества перед совершенством. Например, если есть автозаполнение или опережающее ввод текста, его нужно показать вместе с раскрывающимися параметрами.
В основном они активируются при запуске API для каждого нажатия клавиши. Как правило, функция устранения дребезга является одним из практичных вариантов быстрого запуска API, а также позволяет использовать все атрибуты с задержкой по времени. Это подходящие варианты для быстрого добавления пользователя при наборе текста.
Когда вы даете задержку в 300 мс, пользователю требуется некоторое время или больше, чтобы ввести следующее слово или букву. Это вполне практичный вариант для срабатывания API, и процесс в основном уменьшает количество вызовов API и делает его довольно значительным.
Создание приложения React и установка модуля:
Шаг 1: Создайте приложение React с помощью следующей команды:
npx create-react-app react-debouncingШаг 2: После создания папки вашего проекта, т. е. реакции на устранение дребезга, перейдите к ней с помощью следующей команды:
cd react-debouncingШаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:
npm install lodashОбратный вызов без устранения дребезга:
Процесс в основном дополнен важными аспектами, называемыми ‹FilterList›. Основная причина в том, что у них есть полный список имен, который включает 200 записей.
В частности, у него есть компонент и ввод, где пользователь вводит требуемый запрос и имя, чтобы они автоматически отфильтровывались по запросу. Компонент ‹FilterList› указан ниже:
import React, { useState, useCallback } from "react";
import debounce from "lodash.debounce";
export function FilterList({ names }) {
const [query, setQuery] = useState("");
let filteredNames = names;
if (query !== "") {
filteredNames = names.filter((name) => {
return name.toLowerCase().includes(query.toLowerCase());
});
}
const changeHandler = (event) => {
setQuery(event.target.value);
};
const debouncedChangeHandler = useCallback(debounce(changeHandler, 300), []);
return (
<div>
<input
onChange={debouncedChangeHandler}
type="text"
placeholder="Type a query..."
/>
{filteredNames.map((name) => (
<div key={name}>{name}</div>
))}
<div>{filteredNames.length === 0 && query !== "" && "No matches..."}</div>
</div>
);
}Что такое приложение для устранения дребезга?
В основном реализовано устранение дребезга, при котором поиск работает вместе с пользователем. Они вводятся в основном в поле поиска для получения правильных результатов. В первую очередь это происходит с сервера, поэтому нажатие на серверный API останавливается в наибольшей степени.
В основном они активируются частыми изменениями API сервера, что снижает производительность сервера. Доступны различные приложения, основанные на подавлении дребезга, такие как веб-страницы с загрузкой контента, такие как Face, Twitter и многие другие. Эти приложения в основном позволяют пользователям сохранять контент и непрерывно прокручивать его вниз.
Обычно, когда прокручиваемое событие часто щелкают, это может оказать влияние. Основная причина в том, что они содержат больше изображений и видео. События прокрутки используют устранение дребезга. Например, когда вы ищете debounce handleOnChange
function debounce(fn, delay) {
var timer = null;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
}
var SearchBox = React.createClass({
render: function() {
return <input type="search" name="p" onChange={this.handleOnChange} />;
},
handleOnChange: function(event) {
// make ajax call
}
});Коды для отмены обратного вызова:
Для устранения дребезга функции changeHandler в Reactjs удобно использовать lodash. Отказаться от пакета. В основном они активируются с помощью различных библиотек, которые позволяют устранять дребезг.
import debounce from 'lodash.debounce';
const debouncedCallback = debounce(callback, waitTime);В соответствии с процедурой функция debounce() будет принимать функцию аргумента обратного вызова. Это подходящие варианты для возврата дебацированной версии для своих функций. Функция debounce в основном вызывается, поскольку debouncedCallback автоматически вызывается несколько раз.
Они взрываются и проверяются вызовом обратного вызова в разное время ожидания. Если проанализировать процесс, то вполне значимый способ для устранения дребезга подходит идеально. Это подходящие методы для фильтрации в ‹FilterList›: давайте отменим дребезг changeHandler. Процесс в основном приведет к времени ожидания 300 мс.
import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';
export function FilterList({ names }) {
const [query, setQuery] = useState("");
let filteredNames = names;
if (query !== "") {
filteredNames = names.filter((name) => {
return name.toLowerCase().includes(query.toLowerCase());
});
}
const changeHandler = event => {
setQuery(event.target.value);
};
const debouncedChangeHandler = useCallback(
debounce(changeHandler, 300)
, []);
return (
<div>
<input
onChange={debouncedChangeHandler}
type="text"
placeholder="Type a query..."
/>
{filteredNames.map(name => <div key={name}>{name}</div>)}
</div>
);
}Создание проекта с внутренним кодом:
Полезно создавать проект автозавершения с помощью безопасного API при нажатии клавиши. Они в основном увеличивают пользовательскую функцию Debounce, и это довольно удобный вариант для использования встроенной функции Debounce, обеспечивающий лучшее использование.
Создание короткой серверной программы с использованием узла гарантирует лучшую строку. Получите лучшие услуги по разработке React JS, подходящие для выполнения Debounce в Reactjs, и сэкономьте больше времени.
const express =require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use((req,res,next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
next();
});
const Words = mongoose.model("words", new mongoose.Schema({
words: [String]
}));
app.get("/api/words", async (req , res) => {
let qw = req.query.queryWord;
let queryWord = qw.replace(/^"|"$/g, '');
const words = await Words.find({})
let wordsArray = words[0].words;
let filteredArray = wordsArray.filter(val => {
return val.indexOf(queryWord.toLowerCase()) > -1
});
res.send(filteredArray);
});
app.post("/api/words", async (req , res) => {
const newWordArray = new Words(req.body);
const savedArray = await newWordArray.save();
res.send(savedArray);
});
const PORT = process.env.port || 5000;
mongoose.connect("mongodb://localhost/word-list-db", {useNewUrlParser: true, useUnifiedTopology: true})
.then(() => {
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
})
.catch((err) => console.log(err));
mongoose.set('useFindAndModify', false);Код реакции:
debounceFunction принимает 2 разных аргумента. В основном они включают основные функции при вызове, когда они задерживаются, такие как функция getDropDown. Они включают в себя сумму задержки для вызова и гарантируют получение быстрой функции.
import React , {useCallback, useState} from 'react';
import './App.css';
import axios from 'axios';
function App() {
const [options, showOptions] = useState(false);
const [searchString, setSearchString] = useState("");
const [dropDownOptions, setDropdownOptions] = useState([]);
const onInputClickHandler = () => {
showOptions(true);
}
const getDropDown = (val) => {
axios.get("http://localhost:5000/api/words?queryWord=" + val).then(res => {
setDropdownOptions(res.data);
});
}
const onInputChangeHandler = (e) => {
const nextValue = e.target.value
setSearchString(nextValue);
getDropDown(nextValue);
}
const setOptionsAsInputHandler = (val) => {
showOptions(false);
setSearchString(val);
}
return (
<div className="App">
<header className="App-header">
<h1>Debounce In React</h1>
<div className="Autocomplete">
<input className="Input" placeholder="Type Something..." onClick={onInputClickHandler} onChange={onInputChangeHandler} value={searchString}/>
<div className="Options">
{options ?
dropDownOptions.map(value => {
return <div key={value} onClick={() => setOptionsAsInputHandler(value)}>{value}</div>
})
: null}
</div>
</div>
</header>
</div>
);
}
export default App;Заключение:
Наилучший способ создать функции, для которых отменены дребезги, — использовать хук useMemo(). Это также подходящие варианты для обработки всех происходящих событий. Правильная настройка гарантирует полное обновление с закрытием без дребезга. При доступе обработчика отклоненных событий важно установить аргументы зависимостей, используя useMemo(…, dependencies).
Спасибо, что прочитали нашу статью от начала до конца. Надеюсь, вам понравилось читать и вы извлекли пользу из нашей статьи. Кроме того, дайте нам знать ваши мысли. Мы постоянно улучшаем наш контент и всегда стараемся предоставить вам самое лучшее.
Если вашему бизнесу не хватает профессионалов, наймите компанию-разработчика мобильных приложений для разработки приложений и решения технических проблем.
Продолжай учиться!!! Продолжайте делиться!!!
