时间戳

首页 > 解决方案 > 使用 React 的 UseEffect 和事件监听器的区别？

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

问题描述

所以我试图理解在 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，我的功能的全部要点就是隐藏移动菜单。

标签： reactjsaddeventlisteneruse-effect

解决方案

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

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

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

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

        window.addEventListener('resize', hideMenu);

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

推荐阅读