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