反应钩子:如何处理相互依赖的useCallbacks

Question

react的linter喜欢对DependencyList严格要求。这将导致以下情况，即两个事件处理程序相互依赖。由于这些函数是用addEventListener注册的，我知道如果它们改变了，就会导致内存泄漏，所以只需清空依赖列表就可以了--但是，在执行linter规则时，有什么正确的方法来处理这个问题呢？

const onMouseMove = useCallback((e) => {
  if (!isSwipe(e)) {
    onMouseUp(e)
  }
}, [onMouseUp])

const onMouseUp = useCallback((e) => {
  document.removeEventListener('mousemove', onMouseMove)
}, [onMouseMove])

Answer 1

useCallback本质上是useMemo的一个版本，专门用于回忆录功能。如果两个函数是相互依赖的，不能单独与useCallback一起回传，那么它们可以与useMemo一起回传。

const { onMouseMove, onMouseUp } = useMemo(() => {
    const onMouseMove = (e) => {
        if (!isSwipe(e)) {
            onMouseUp(e)
        }
    };
    const onMouseUp = (e) => {
        document.removeEventListener('mousemove', onMouseMove)
    }
    return { onMouseMove, onMouseUp };
}, [/* shared deps*/]);

这是我用来一起回忆函数的一般模式，我认为这是对一般问题的最简单的回答。但我不确定，从这里的实际代码来看，这是最好的方法--如果removeEventListener是一个与由于useMemo重新计算而注册的函数不同的函数，那么useMemo可能无法工作。在实践中，可能更像是一种useEffect用例。

Answer 2

经过一些研究，看起来(useCallback()在实践中常常无效)的解决方案也解决了这个问题。总的想法是回忆录一个指向指向最近的函数的参考函数的函数。

这是一次肮脏的黑客攻击，也可能在并发模式下造成问题，但就目前而言，这是facebook推荐的：如何从useCallback读取经常更改的值

const useEventCallback = (fn) => {
    const ref = useRef(fn)
    useEffect(() => {
        ref.current = fn
    })
    return useCallback((...args) => {
        ref.current(...args)
    }, [ref])
}

const onMouseMove = useEventCallback((e) => {
  if (!isSwipe(e)) {
    onMouseUp(e)
  }
})

const onMouseUp = useEventCallback((e) => {
  document.removeEventListener('mousemove', onMouseMove)
})