当前位置：首页 > React

react实现防抖

2026-01-27 08:37:09React

防抖的概念

防抖（Debounce）是一种优化高频触发事件的技术，确保事件在停止触发后的一段时间内只执行一次。适用于输入框搜索、窗口调整等场景。

实现方法一：使用 `lodash` 库

安装 lodash 并直接调用其 debounce 方法：

npm install lodash

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

function SearchInput() {
  const [value, setValue] = useState('');

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

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

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

实现方法二：自定义 Hook

封装一个自定义的 useDebounce Hook，复用防抖逻辑：

import { useState, useEffect, useCallback } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 500);

  useEffect(() => {
    if (debouncedValue) {
      console.log('Searching for:', debouncedValue);
      // 实际搜索逻辑
    }
  }, [debouncedValue]);

  return (
    <input
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
}

实现方法三：手动实现防抖函数

直接在组件内实现防抖逻辑：

react实现防抖

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

function SearchInput() {
  const [value, setValue] = useState('');
  const debounceTimer = useRef(null);

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

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);

    if (debounceTimer.current) {
      clearTimeout(debounceTimer.current);
    }
    debounceTimer.current = setTimeout(() => {
      handleSearch(inputValue);
    }, 500);
  };

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