react中使用lodash的debounce,实现防抖加载

6,100 阅读1分钟

1.导入

import debounce from 'lodash/debounce';

2.创建唯一的debounce,防止重复调用函数

使用useCallback

const load = useCallback(
    debounce(() => loadList(), 500),
    [],
  );

由于创建之后useCallback从不刷新,它内部的state一直不变 (内部进行setter会改变外部state)

或者UseRef

const load = useRef(
    debounce(() => loadList(), 500),
    [],
  );

useRef保存函数,终身存在

3.传递最新的params

由于内部state不变,需要从外部传入最新参数

  const load = useCallback(
    debounce(p => loadList(p), 500),
    [],
  );
  useEffect(() => {
    load(params);
  }, [params]);

参考链接:divyanshu013.dev/blog/react-…