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