react 防抖示例

以下是在 React 中使用防抖的示例：

import React, { useState } from 'react';
import { debounce } from 'lodash'; // 导入 debounce 函数

const SearchBar = () => {
  const [searchTerm, setSearchTerm] = useState('');

  // 使用 debounce 函数创建一个防抖搜索函数
  const debouncedSearch = debounce((value) => {
    console.log(`Searching for ${value}...`);
    // 在这里触发搜索操作，例如发送 API 请求
  }, 500);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setSearchTerm(value);
    debouncedSearch(value); // 调用防抖搜索函数
  };

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

export default SearchBar;

这个示例中，我们在组件中定义了一个名为 `debouncedSearch` 的防抖搜索函数，并在输入框的 `onChange` 事件中调用它。每次输入框的值发生变化时，都会触发 `handleInputChange` 函数，将输入框的值传递给 `debouncedSearch` 函数进行防抖搜索。在这个示例中，我们使用了 Lodash 库中的 `debounce` 函数来实现防抖。