看不懂window.onscroll = null在React中的使用

Question

這里的window.onscroll = null有什么用？ 即使我評論最后一行，它也沒有任何區別。

const [isScrolled, setIsScrolled] = useState(false);

window.onscroll = () => {
    setIsScrolled(window.pageYOffset === 0? false : true)
    console.log(isScrolled);

    return () => (window.onscroll = null);
};

Answer 1

刪除添加到 onScroll 事件的事件處理程序。 但最好將它移到 useEffect 鈎子中。

Answer 2

正如所寫， window.onscroll = null是無用的。 它永遠不會被執行。 但是，該代碼可疑地接近於有用的代碼。 以下代碼是我希望看到的：

const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
  window.onscroll = () => {
    setIsScrolled(window.pageYOffset === 0? false : true)
  };
  return () => (window.onscroll = null);
}, []);

在此修改版本中， return () => (window.onscroll = null)返回清理 function 效果。 當組件卸載時，這個 function 運行並刪除事件偵聽器。 這樣做很重要，可以避免 memory 泄漏。