背景: 在函数组件中使用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]
);