事件偵聽器沒有被刪除

Question

此代碼在加載 DOM 內容時注冊滾動事件偵聽器。 當組件被卸載時，我正在調用removeEventListener()方法，但是事件偵聽器沒有被刪除並且正在其他組件中被調用。 我哪里錯了？ 謝謝！

useEffect(() => {
  return () => {
    document.removeEventListener('scroll', listener, true);
    console.log('unmount');
  };
}, []);

useLayoutEffect(() => {
  document.addEventListener('DOMContentLoaded', (event) => {
    document.addEventListener('scroll', listener, true);
  });
});

const listener = () => {
  let elementTop = $('.foo').offset().top;
  let elementBottom = elementTop + $('.foo').outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  let boolean = elementBottom > viewportTop && elementTop < viewportBottom;
  boolean ? setMapAbsolute(true) : setMapAbsolute(false);
};

Answer 1

由於添加事件處理程序不會更改屏幕上呈現的內容，因此我建議將其添加到您的useEffect()而不是useLayoutEffect()中。 您已經將一個空數組作為依賴項列表傳遞給 useEffect，這將確保事件處理程序只添加一次。

useEffect(() => {
  document.addEventListener('DOMContentLoaded', (event) => {
    document.addEventListener('scroll', listener, true);
  });
  return () => {
    document.removeEventListener('scroll', listener, true);
    console.log('unmount');
  };
}, []);

Answer 2

您在依賴項中錯過了一個空數組，因此在每次重新渲染時都會重新附加偵聽器。

useLayoutEffect(() => {
 document.addEventListener('DOMContentLoaded', (event) => {
 document.addEventListener('scroll', listener, true);
 });
},[]);