时间戳

首页 > 解决方案 > 窗口滚动事件以检查是否到达页面底部

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

问题描述

我正在我的 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)需要？事件被添加然后被删除？

标签： javascriptreactjsdom

解决方案

a 的返回值useEffect应该是卸载组件时要使用的函数。

当组件不再出现在屏幕上时，您不希望该事件处理程序保持连接状态！

不用担心，返回的箭头函数不会立即执行 - 仅在组件未安装时

这是在文档中

推荐阅读