Введение:

Привет, мир,

На этой неделе что-то немного другое (я пробую новую концепцию!).

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

Я слышал об этом термине «Debounce» в пространстве React/JavaScript, но на самом деле я не знаю, что это такое.

Мне кажется, что я должен это знать, поэтому я попытаюсь ознакомиться с этой концепцией (используя для этого этот пост в блоге).

Надеюсь, вы сможете чему-то научиться из этого сообщения в блоге.

Как всегда, прежде чем мы перейдем к этому сообщению, обязательно поаплодируйте сообщению и поделитесь им с друзьями. На самом деле, дайте мне знать, что вы думаете об этой новой концепции, может быть, я сделаю это снова!

Приятного чтения!

Так что же такое на самом деле откат в React?

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

Похоже, это практика разработки программного обеспечения, которая гарантирует, что тяжелые задачи не будут запускаться слишком часто. Ясно, что это связано с производительностью, потому что тяжелая функция, вызываемая несколько раз, может сильно замедлить работу нашего приложения.

Способы реализации отката:

Просто используя setTimeout(). Помните clearTimeout(), если в useEffect().

Использование функции lodash debounce(), которая, по сути, просто использует setTimeout с тайм-аутом, являющимся отдельным параметром. Это может быть сделано с помощью useCallback()/useMemo().

Хук useDebounce().

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

Ссылки:

https://www.freecodecamp.org/news/debouncing-explained/#:~:text=Suppose%20we%20have%20an%20API,t%20get%20fired%20so%20часто.



Как отклонить и ограничить обратные вызовы в React
Когда компонент React обрабатывает взрывные события, такие как изменение размера окна, прокрутка, ввод пользователем ввода и т. д. — это…dmitripavlutin.com





Как отклонить и ограничить обратные вызовы в React
Когда компонент React обрабатывает взрывные события, такие как изменение размера окна, прокрутка, ввод пользователем ввода и т. д. — это…dmitripavlutin.com





Реакторный хук useDebounce() — usehooks-ts
Этот хук React помогает ограничить повторную визуализацию компонента слишком много раз. Представьте, что вы хотите запустить…usehooks-ts.com



Заключение:

Возможно, я знал об этой теме больше, чем думал.

С учетом сказанного, это все еще был полезный опыт. Теперь я должен быть в состоянии реализовать дебаунс в коде (это кажется достаточно простым!)

Заключительные вещи:

Для меня это был просто очень быстрый способ углубиться в тему.

Как всегда, спасибо за чтение, не забудьте проверить мои ссылки:



викрамнайаркс | Твиттер, Инстаграм | Дерево ссылок
Дерево ссылок. Заставьте свою ссылку делать больше.linktr.ee



Хештеги:

#javascript #html #programming #css #coding #java #python #developer #programmer #webdeveloper #webdevelopment #code #coder #php #webdesign #software #softwaredeveloper #computerscience #codinglife #reactjs #технологии #frontend #разработка #программисты #js #web #инженер-программист #programmingmemes #linux #javascriptdeveloper #typescript #debounce