在 React 开发中，有时候需要在用户输入或者其他事件触发时进行防抖处理，以避免频繁地触发请求或者更新 UI。本文将介绍如何在 React.js 中进行消抖，并提供详细的代码示例以及指导意义。
什么是消抖？
消抖（Debouncing）是一种常见的前端技术，用于减少函数调用的次数。当一个函数被频繁地调用时，我们可以使用消抖来让这个函数只在某段时间内执行一次。在 React 应用中，经常会使用消抖来减少网络请求或者更新 UI 的次数。
如何实现消抖？
React 中可以使用 useCallback 和 useEffect 钩子来实现消抖。
------ - ------------ --------- - ---- --------
-------- --------------------- ------ -
----- ----------------- - ------------
--------- -- -
----- --------- - ------------- -- -
------------------
-- -------
------ -- -- -
------------------------
--
--
---------- -------
--
------------ -- -
------ -------------------------
-- ---------------------
------ ------------------
-上述代码定义了一个 useDebounce 自定义 Hooks，它接受两个参数：回调函数和延迟时间。
这个钩子返回了一个新的函数 debouncedCallback，它会在 delay 毫秒内最多执行一次。
当调用 debouncedCallback 时，它会在 delay 毫秒内延迟执行传入的回调函数。如果在这段时间内再次调用 debouncedCallback，则会取消前一次的执行，并重新计时。这样，在短时间内重复调用同一个函数时，只有最后一次调用会真正执行。
我们可以使用 useEffect 钩子来清理 debouncedCallback，以避免组件卸载时仍然执行回调函数。同时，由于 useCallback 返回的是一个 memoized 函数，可以确保每次渲染时都返回相同的函数引用，从而避免不必要的重新渲染。
如何在实际应用中使用消抖？
现在，我们已经定义了一个通用的消抖钩子。接下来，让我们看看如何在实际应用中使用它。
防抖输入框
假设我们有一个需要进行网络请求的搜索框，我们希望用户输入完毕之后才触发搜索请求。我们可以使用 useDebounce 钩子来对搜索函数进行防抖处理：
------ - -------- - ---- --------
------ ----------- ---- ----------------
-------- ----------- -
----- ------- --------- - -------------
----- ------------ - --------------- -- -
-- ------
-- -----
-------- ------------------- -
-----------------------------
---------------------------------
-
------ -
------ ----------- ------------- ----------------------- --
--
-上述代码中，我们在输入框的 onChange 事件中调用了 handleSearch 函数。由于 handleSearch 使用了 useDebounce 钩子，因此它不会立即执行，而是在用户停止输入后 500 毫秒才真正触发。
防抖窗口大小变化
另一个常见的应用场景是响应窗口大小变化。当窗口大小改变时，我们通常需要重新计算元素的尺寸等属性。但是，由于窗口大小变化非常频繁，如果每次都重新计算，会导致性能下降。我们可以使用 `
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8842