react hooks中debounce无效的解决
react hooksdebounce

在react hooks写法中,在监听状态变化的时候,触发函数执行,由于需要减少性能消耗,使用了消抖函数。但是,结果是虽然实现了延迟,但是并没有实现消抖,所有的调用都执行了。
这里 我们监听下watchAll 这个状态的变化。

useEffect(()=>{
handleValuesChange(values);
}, [watchAll]);

此时的消抖函数是直接使用的

const handleValuesChange = _.debounce((values)=>{
    console.log(values)
},1000);

image12.png
由效果可见,所有的函数调用都被执行了,这个不是我们要的结果。可以加一个useCallback

const handleValuesChange = useCallback(_.debounce((values)=>{
    console.log(values)
},1000),[]);



这样调整一下,消抖效果就实现了。

暂无评论