react中防抖搜索框实现

在 React 中实现防抖搜索框，可以使用 `useEffect` 和 `useState` 这两个 React Hook。

首先，我们需要定义一个状态变量 `searchTerm` 来保存搜索框中的文本，以及一个 `debouncedSearchTerm` 变量来保存防抖后的文本。然后，我们可以使用 `useEffect` 监听 `searchTerm` 变量的变化，当它发生变化时，使用 `setTimeout` 来设置一个定时器，等待一定时间后再将搜索框中的文本赋值给 `debouncedSearchTerm` 变量。

最后，在组件中使用 `debouncedSearchTerm` 变量来进行搜索即可。

以下是代码示例：

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

function DebouncedSearchBox(props) {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');

  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedSearchTerm(searchTerm);
    }, 500);

    return () => {
      clearTimeout(timerId);
    };
  }, [searchTerm]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(event) => setSearchTerm(event.target.value)}
      />
      <button onClick={() => props.onSearch(debouncedSearchTerm)}>Search</button>
    </div>
  );
}

在上面的代码中，我们使用 `setTimeout` 设置了一个 500ms 的延时，当 `searchTerm` 发生变化时，会清除之前的定时器并重新设置一个新的定时器。当定时器时间到达后，会将 `searchTerm` 赋值给 `debouncedSearchTerm`，从而实现防抖效果。最后，我们将 `debouncedSearchTerm` 传递给 `onSearch` 函数进行搜索。