防抖踩坑详细教程

防抖踩坑超详细

• 1.为啥我的防抖不生效

保持干净的防抖

/* 首先先正常调用我们频繁调用的函数 */
/* 但是 但是 我们不能在这里做任何操作 并使用 persist() 来保留合成事件对象 */
/* 接下来执行一个我们写的防抖函数 */
/* 举个🌰： */

const myDebounceFun = _.undebounce((e) => {
  /* after 300ms dosomething.... */
}, 300);

const onChange = (e) => {
  e.persist();
  myDebounceFun(e);
};

return (
  <div>
    <Input onChange={onChange} />
  </div>
);

状态变量更新导致函数重新加载导致渲染

const [value, setValue] = useState();

const myDebounceFun = _.debounce((data) => {
  console.log("我触发了接口", data);
}, 1000);

/* 如果此处咩有进行使用useCallback包裹，使用setState之后，页面重新渲染，从而导致生成新的onchange函数，不同的函数去调用myDebounceFun函数，那也就是意味着onchange执行多少遍，那这个防抖函数就回执行多少遍（不是来源于同一个onchange函数），所有加上usecallback之后就会能保证每次调用的onchange函数都是同一个  */
const onchange = useCallback((e) => {
  const data = e.target.value;
  setValue(data);
  myDebounceFun(e.target.value);
}, []);

return (
  <div>
    <Input value={value} onChange={onchange} />
  </div>
);

• 2.为啥设置完防抖无法输入

 /* 首先频繁触发事件的组件中的 value是不需要使用状态变量去绑定的 */
 /* 举个🌰： */
 /* bad */
 <Input value={inputValue} onChange={onChange}>

 <Input onChange={onChange}>

究其原因你还要一直,

setState({inputValue: ....})