antd debounce

在 Ant Design（antd）中，`debounce`是一种优化性能的技术，特别是在处理频繁的用户交互时。它用于限制函数的执行频率，避免因快速连续触发而导致不必要的计算和渲染。举个例子：

**高阶组件实现**[^1]:

import { Checkbox } from 'antd';
import reactComponentDebounce from 'react-component-debounce';

// 创建一个带防抖功能的Checkbox组件
const CheckboxA = reactFormFieldDebounce({
  valuePropName: 'checked',
  triggerMs: 250, // 设置250毫秒的延迟能力
})(Checkbox);

// 使用时，CheckboxA的onChange事件会在用户停止按键250毫秒后再执行真正的更新逻辑
// 这有助于减少表单频繁更新，提升用户体验
<CheckboxA onChange={this.handleCheckboxChange} />

在这个例子中，`handleCheckboxChange`函数被包裹在`reactComponentDebounce`里，当用户勾选或取消勾选时，不会立即触发`handleCheckboxChange`，而是等待250毫秒后才执行。

**注意事项**:
- `debounce`适合`onChange`和`value`成对使用的场景，且onChange传递的值应与value一致，没有过滤value的组件可以利用它。
- 如果这些条件不满足，可能需要直接通过`shouldComponentUpdate`来控制组件的更新，以保证组件状态准确无误地反映用户输入。