防抖节流，React失效写法

防抖 lodash.debounce

直到经历了wait时间后，才执行函数
https://lodash.com/docs/4.17.15

import debounce from 'lodash/debounce';
constructor() {
  this.search = debounce(this.search, 500);
}
search = ()=> {
  ajax()
}

节流 lodash.throttle

每隔wait时间，执行一次函数
https://lodash.com/docs/4.17.15

import throttle from 'lodash/debounce';
constructor() {
  this.search = throttle(this.search, 500);
}
search = ()=> {
  ajax()
}

React 函数组件失效

每次render 都会导致debounce第一个参数（异步请求函数）更新，进而导致debounce的闭包失效

解决办法

通过useCallback保证传入debounce的第一个参数都是同一个函数

  const _onFinish = useCallback(values => {
    // 所有的异步请求
    getTotalStatistics({ ...baseParam, ...values });
    onFinishWithSchool(values);
    getSchoolListFn(values.inviteCode ? values.inviteCode : -1);
    //
  }, []);

  const onFinish = useCallback(
    debounce(_onFinish, 500, {
      leading: false,
      trailing: true,
    }),
    [_onFinish],
  );