react中给搜索添加防抖

在 React 中给搜索添加防抖可以通过在搜索组件中使用 `lodash` 库中的 `debounce` 方法来实现。具体步骤如下：

1. 安装 lodash 库：

npm install lodash

2. 在组件中引入 debounce 方法：

import { debounce } from 'lodash';

3. 在组件中定义一个搜索函数，并使用 debounce 包装：

const search = debounce((query) => {
  // 处理搜索逻辑
}, 500);

这里的 `500` 表示等待时间，也就是在用户输入停顿了 500ms 后才执行搜索函数。

4. 在搜索框的 onChange 事件中触发搜索函数：

<input type="text" onChange={(e) => search(e.target.value)} />

这样就可以实现一个带有防抖功能的搜索组件了。当用户输入时，如果输入频率较高，搜索函数就不会被立即执行，而是等待一段时间后再执行，从而减少了不必要的网络请求。