即使在组件卸载后也无法阻止 window.onScroll 触发答案

【问题标题】：Unable to stop window.onScroll from triggering even after component unmounts即使在组件卸载后也无法阻止 window.onScroll 触发
【发布时间】：2019-08-28 10:09:15
【问题描述】：

我的项目中有两种不同的NavBar 组件：一种NavBarTransparent.jsx，仅用于index.jsx（主页），另一种NavBar.jsx，用于所有其他页面。

现在，我在NavBarTransparent.jsx 组件中设置了每次窗口滚动时触发的函数：

// components/NavBarTransparent.jsx

useEffect(() => {
  window.removeEventListener('scroll', scrollFunction);
});

const scrollFunction = () => {
    const nav = document.getElementById('nav');
    const overlay = document.getElementById('nav-overlay');
    const travel = document.documentElement.scrollTop;
    const travelRem = travel / 16;
    const navHeight = 7 - (travelRem / 6);
    if (navHeight <= 4) {
      nav.style.lineHeight = `${4}rem`;
      overlay.style.opacity = 1;
    } else if (navHeight >= 7) {
      nav.style.lineHeight = `${7}rem`;
      overlay.style.opacity = 0;
    } else {
      nav.style.lineHeight = `${navHeight}rem`;
      overlay.style.opacity = (7 - navHeight) / 3;
    }
  };

另一个导航栏组件 (NavBar.jsx) 没有此事件侦听器。但是，当我从/（客户端路由）访问/about 时，事件侦听器仍然会被触发。为什么当其他页面甚至不使用该组件时，侦听器会被击中？

回购位于https://github.com/amitschandillia/proost/tree/master/web

【问题讨论】：

global.window.removeEventListener('scroll', scrollFunction);
我在您的仓库中没有看到 NavBarTransparent 文件。请出示NavBarTransparent文件的完整代码

标签： javascript reactjs next.js

【解决方案1】：

使用以下内容对其进行了修复：

useLayoutEffect(() => {
    if(transparent) { window.addEventListener('scroll', scrollFunction); }

    // returned function will be called on component unmount
    return () => {
      window.removeEventListener('scroll', scrollFunction);
    }
  }, []);

看起来像在组件挂载之前添加的窗口事件侦听器必须在组件卸载之前显式删除。我通过useEffect 钩子添加了侦听器，但没有卸载它，因此存在持久触发器的问题。现在，我使用了useEffect 的return() sn-p（相当于componentWillUnmount 的Hooks）来移除监听器，它工作正常。

另外，我使用useLayoutEffect 而不是useEffect，因为如果您想在在浏览器绘制之前操作DOM，就像这里的情况一样，最好使用useLayoutEffect`。

【讨论】：