当前位置：首页 > React

React如何使用防抖

2026-03-10 18:33:03React

防抖的基本概念

防抖（Debounce）是一种限制函数频繁调用的技术，确保函数在连续触发时只执行一次。常用于输入框搜索、窗口大小调整等场景。

使用 Lodash 实现防抖

Lodash 提供了现成的 _.debounce 方法，适合快速集成到 React 中。

安装 Lodash：

npm install lodash

在组件中使用：

import React, { useState } from 'react';
import { debounce } from 'lodash';

function SearchInput() {
  const [query, setQuery] = useState('');

  const handleSearch = debounce((value) => {
    console.log('Searching for:', value);
    // 实际搜索逻辑
  }, 500);

  const handleChange = (e) => {
    setQuery(e.target.value);
    handleSearch(e.target.value);
  };

  return <input value={query} onChange={handleChange} />;
}

自定义防抖 Hook

通过 useRef 和 useCallback 实现自定义防抖逻辑：

import React, { useState, useRef, useCallback } from 'react';

function useDebounce(callback, delay) {
  const timerRef = useRef();

  return useCallback(
    (...args) => {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => callback(...args), delay);
    },
    [callback, delay]
  );
}

function SearchInput() {
  const [query, setQuery] = useState('');

  const handleSearch = (value) => {
    console.log('Searching for:', value);
  };

  const debouncedSearch = useDebounce(handleSearch, 500);

  const handleChange = (e) => {
    setQuery(e.target.value);
    debouncedSearch(e.target.value);
  };

  return <input value={query} onChange={handleChange} />;
}

注意事项

清理定时器：在组件卸载时清除防抖的定时器，避免内存泄漏。
```
useEffect(() => {
  return () => clearTimeout(timerRef.current);
}, []);
```
依赖项处理：若防抖函数依赖外部变量，需将其加入 useCallback 的依赖数组。