当前位置：首页 > React

React如何使用防抖

2026-01-24 10:17:30React

防抖的基本概念

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

使用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

若不依赖Lodash，可通过useRef和useCallback实现自定义防抖Hook：

React如何使用防抖

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

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

  return useCallback(
    (...args) => {
      clearTimeout(timeoutRef.current);
      timeoutRef.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(timeoutRef.current);
}, []);
```
依赖项处理：若防抖函数依赖外部变量（如状态），需将其加入useCallback的依赖数组。