React 类组件及函数组件结合Lodash debounce需要注意的问题和一种解决方法

在React组件中使用Lodash debounce函数，可能会出现防抖不生效的情况。
导致这个问题的主要原因：重新render导致debounce函数第一个参数是新生成的,而不是对同一个函数的引用
需要注意的就是debounce接收的第一个函数参数在不同的render周期内不是重新生成的，引用保持不变。

• class组件

<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 => {
 //具体的业务逻辑
}

• function组件

<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]
  );