事件侦听器作为引用传递时未调用该函数

Question

我在 React 中有一个非常简单的函数和非常简单的事件监听器。这是代码：

const handleAutoplay = useCallback(() => {
    console.log("test");
}, []);

useEffect(() => {
   console.log("glo");
   window.addEventListener("scroll", handleAutoplay);
   return window.removeEventListener("scroll", handleAutoplay);
},[handleAutoplay])

我遇到的问题是，这个事件监听器没有调用它应该调用的函数。什么也没发生。但是，当我将代码更改为：

window.addEventListener("scroll", () => handleAutoplay());

它就像一个魅力。为什么

() => handleAutoplay()

可以工作，而

handleAutoplay

却不能？

我尝试过使用和不使用

useCallback

，所以这不是问题（AFAIK）。为什么会发生这种情况？有什么解释吗？ Stack Overflow 和互联网上的所有示例看起来都与我编写的代码完全相同。我是不是错过了什么？

Answer 1

好吧，我忘记了 useEffect 应该返回一个函数，而不仅仅是 window.removeEventListener(...)。

代替：

useEffect(() => {
      console.log("glo");
      window.addEventListener("scroll", handleAutoplay);
      return window.removeEventListener("scroll", handleAutoplay);
    },[handleAutoplay])

我应该：

useEffect(() => {
  console.log("glo");
  window.addEventListener("scroll", handleAutoplay);
  return () => window.removeEventListener("scroll", handleAutoplay);
},[handleAutoplay])

区别在于 useEffect 返回的内容。