当前位置：首页 > React

React如何使用防抖

2026-03-31 17:59:12React

React 中使用防抖的方法

防抖（Debounce）是一种优化高频触发事件的技术，确保函数在最后一次调用后的一段时间内不再被触发。在 React 中，可以通过以下几种方式实现防抖。

使用 Lodash 的 `debounce` 函数

Lodash 提供了 debounce 函数，可以直接用于 React 组件。以下是一个示例：

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

function SearchComponent() {
  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
      type="text"
      value={query}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchComponent;

自定义防抖 Hook

可以创建一个自定义 Hook 来实现防抖功能：

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

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

  useEffect(() => {
    timeoutRef.current = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timeoutRef.current);
    };
  }, [value, delay]);

  return debouncedValue;
}

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

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

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

  return (
    <input
      type="text"
      value={query}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchComponent;

使用 `useCallback` 和 `setTimeout`

通过 useCallback 和 setTimeout 结合实现防抖：

React如何使用防抖

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

function SearchComponent() {
  const [query, setQuery] = useState('');
  const timeoutRef = React.useRef();

  const handleSearch = useCallback((value) => {
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => {
      console.log('Searching for:', value);
      // 执行搜索逻辑
    }, 500);
  }, []);

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

  return (
    <input
      type="text"
      value={query}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchComponent;