react中防抖搜索框实现

在 React 中实现防抖搜索框，可以使用 useState 和 useEffect 钩子函数，以及 lodash 的 debounce 方法。

首先，在函数组件中定义一个搜索框的 state：

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

function SearchBox() {
  const [searchTerm, setSearchTerm] = useState('');

  // TODO: debounce search function
  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <input type="text" value={searchTerm} onChange={handleSearch} />
  );
}

export default SearchBox;

接着，使用 useEffect 钩子函数来监听 searchTerm 状态的变化，并在变化后调用 debounce 方法来限制搜索请求的频率：

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

function SearchBox() {
  const [searchTerm, setSearchTerm] = useState('');

  const debouncedSearch = debounce((searchTerm) => {
    // TODO: Call API to search for searchTerm
  }, 500);

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  useEffect(() => {
    debouncedSearch(searchTerm);
  }, [searchTerm]);

  return (
    <input type="text" value={searchTerm} onChange={handleSearch} />
  );
}

export default SearchBox;

在上面的代码中，我们使用了 lodash 的 debounce 方法来创建一个 debouncedSearch 函数，它将在 500 毫秒内等待 searchTerm 状态的变化。当 searchTerm 状态变化时，useEffect 钩子函数将会调用 debouncedSearch 函数来执行搜索操作。

这样就可以实现一个防抖搜索框了。需要注意的是，这里使用的是函数组件，如果你使用的是类组件，可以在 componentDidMount 和 componentDidUpdate 生命周期中使用 debounce 方法来实现防抖搜索框。