使用 React 的 UseEffect 和事件监听器的区别？

Question

所以我想了解在 React 中编写这个事件监听器有什么问题？我注意到其他人将它包装在 useEffect 钩子中并添加了一个 removeEventlistener，但我不明白这一点，因为它与我的代码做同样的事情。

这是我的代码

function App() {

 const hideMenu = () => {
   if (window.innerWidth > 768) {
   setIsOpen(false);
  }
 };

 window.addEventListener('resize', hideMenu);

}

将此代码放入 useEffect 挂钩有什么意义？为什么我不能只使用上面的代码就可以了？

这是放在 useEffect 挂钩中的相同代码

      useEffect(() => {
        const hideMenu = () => {
          if (window.innerWidth > 768) {
            setIsOpen(false);
          }
        };

        window.addEventListener('resize', hideMenu);
      }, []);

根据我的网站，这两种方法的作用完全相同，那么我如何在控制台中检查执行 useEffect 的目的与我编写它的方式？

如果屏幕大于 768px，我的功能就是隐藏移动菜单。

Answer 1

您的解决方案可能会遇到 2 个问题。

1. 每次状态变量更改或组件重新渲染时，它都会向您的窗口添加一个新的事件侦听器。如果是空括号的使用效果，它只会在组件第一次渲染时运行，类似于“ComponentDidMount”。

2. 如果这不是您最顶级的根组件，并且有人要离开您的屏幕，那么目前您并没有删除您的事件侦听器。这在将来可能会出现问题，或者只是在监听无用的信息。当你卸载监听器时，它保证它在未使用时已经消失，如果你要回去，它会重新添加监听器。

      useEffect(() => {
        const hideMenu = () => {
          if (window.innerWidth > 768) {
            setIsOpen(false);
          }
        };

        window.addEventListener('resize', hideMenu);

        return () => {
          window.removeEventListener('resize', hideMenu);
        }
      }, []);