检查是否到达页面底部的窗口滚动事件

Question

我正在我的React应用程序中实现无限滚动，为了实现这一点，我遵循这篇精彩博客文章的说明:https://upmostly.com/tutorials/build-an-infinite-scroll-component-in-react-using-react-hooks

然而，有一部分我觉得不太清楚。

下面的代码片段检查是否到达页面底部。

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
function handleScroll() {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
console.log('Fetch more list items!');
}

为什么在useEffect()中同时需要window.addEventListener('scroll', handleScroll)和return () => window.removeEventListener('scroll', handleScroll)?事件被添加然后被删除?

Answer 1

useEffect的返回值应为组件unMounted时使用的函数。

当组件不再显示在屏幕上时，你不希望事件处理程序保持附加状态吧!

不要担心，返回的箭头函数不会立即执行——只有当组件被卸载时才会执行👍

在docs

Answer 2

这是因为useEffect

return () => window.removeEventListener('scroll', handleScroll);

使用return表示componentWillUnMount是基于类的或有状态的组件。

window.addEventListener('scroll', handleScroll);在useEffect内部使用是为了确保组件已经安装，然后我们添加scrollEvent。