DEV Community ·

在 React 中实现无限滚动

💡 原文英文，约400词，阅读约需2分钟。

📝

内容提要

文章介绍了如何实现分页加载功能：用户滚动到底部时加载更多项目。通过监测 `window.scrollY`、`window.innerHeight` 和 `document.body.offsetHeight` 判断是否到达底部。使用 React 的 `useEffect` 钩子添加滚动事件监听器，接近底部时增加项目数量。代码示例展示了首次渲染时如何触发滚动事件并动态加载内容。

🎯

关键要点

文章介绍了如何实现分页加载功能，用户滚动到底部时加载更多项目。
需要监测滚动位置，比较与文档主体的总高度。
使用 window.scrollY 获取页面垂直滚动的像素数。
window.innerHeight 表示可见窗口的高度，document.body.offsetHeight 给出主体元素的总高度。
代码示例展示了如何使用 React 的 useEffect 钩子添加滚动事件监听器。
当用户接近页面底部时，增加项目数量。
首次渲染时触发 useEffect 钩子，添加滚动事件监听。

❓

延伸问答

如何在 React 中实现无限滚动功能？

通过监测用户的滚动位置，比较 window.scrollY、window.innerHeight 和 document.body.offsetHeight，当用户接近页面底部时加载更多项目。

在实现无限滚动时，如何判断用户是否到达页面底部？

可以通过比较 window.innerHeight 和 window.scrollY 加上 document.body.offsetHeight 来判断用户是否接近页面底部。

React 中的 useEffect 钩子在无限滚动中有什么作用？

useEffect 钩子用于添加滚动事件监听器，并在首次渲染时触发，以便监测用户的滚动行为。

如何动态加载更多项目到页面中？

通过更新状态 items 的值，例如在用户接近底部时调用 setitems(items + 50) 来动态加载更多项目。

在实现无限滚动时，如何处理滚动事件的清理？

在 useEffect 钩子的返回函数中使用 window.removeEventListener 来清理滚动事件监听器。