使用useCallback解决React函数组件节流失效的问题

原始代码和目标

  <svg ref={edtiorRef}  onMouseMove={handleMouseMove}

const handleMouseMove = _.throttle((event: any) => {
    ...
} 100, { 'trailing': true })}

在这里我们希望把经过节流处理的函数mouseMove 绑定到画板上，以实现节流的作用，那么会发生什么呢

运行结果->节流失效

我们不管怎么调节throttle的值，发现触发的间隔都是一样的，并且是一个很快的间隔，这说明节流函数是不起作用的，并且对性能的损耗也是较大的，因为确实不需要这么多的频繁更新。

为什么会失效

实际上是作用域的原因，在function component里，每次渲染结束之后，内部的变量都会被释放，重新渲染时所有的变量会被重新初始化，产生的结果就是每一次都产生了一个节流函数，之后运行完后又被释放（因为在节流函数里调用了setstate），又调用了新的节流函数，就导致了节流的失效

怎么解决

这里需要使用useCallback，让指针指向同一个函数，就可以了。

const handleMouseMove = useCallback(_.throttle((event: any) => {
    ...
} 100, { 'trailing': true })}, [])

这里需要注意的是，函数内部的值如果依赖于props里面的值，需要在依赖项里进行添加，否则里面的props的值不会发生改变