背景： 在函数组件中使用debounce 不生效，函数依然会执行多次 原因: 重新render 导致debounce函数的第一个参数是新生成的，而不是对同一个函数的引用， 需要注意的就是 debounce 接收的第一个函数参数在不同的render 周期内不是重新生成的，引用保持不变

类组件使用debounce

<Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
//class组件中通过绑定到this上来保证不同生命周期中handleChange的引用不变
onChange = e => {
   e.persist();
   if (!this.handleChangeDebounce) {
     this.handleChangeDebounce = debounce(this.handleChange, 500);
   }
   this.handleChangeDebounce(e);
 };
handleChange = e => {
 //具体的业务逻辑
}

函数组件中使用 debounce

<Input placeholder="请输入股数" onChange={debounceHandleChange} />
  //在函数组件中用useCallback来确保不同生命周期内函数引用不变
  const changeFun = useCallback(value => {
    console.log('vvv', value);
    //具体的业务逻辑
  }, []);
  const debounceFun = useCallback(
    debounce(changeFun, 500, {
      leading: false,
      trailing: true
    }),
    [changeFun]
  );
  const debounceHandleChange = useCallback(
    e => {
      if (e.target && e.target.value) {
        console.log('===', e.target.value);
        debounceFun(e.target.value);
      }
    },
    [debounceFun]
  );