看不懂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 泄漏。