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

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

每次状态变量更改或组件重新渲染时，它都会向您的窗口添加一个新的事件侦听器。如果是在带空括号的使用效果中，只会在组件第一次渲染时运行，类似于“ComponentDidMount”。
如果这不是您最顶层的根组件，并且有人要离开您的屏幕，那么目前您不会删除您的事件侦听器。这在未来可能会出现问题，或者只是在侦听无用的信息。当你下马的时候移除监听器，它保证不用的时候它就消失了，如果你回去，它会重新添加监听器。

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

        window.addEventListener('resize', hideMenu);

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

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

1 个答案: