在 React 中实现无限滚动
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
文章介绍了如何实现分页加载功能：用户滚动到底部时加载更多项目。通过监测 `window.scrollY`、`window.innerHeight` 和 `document.body.offsetHeight` 判断是否到达底部。使用 React 的 `useEffect` 钩子添加滚动事件监听器，接近底部时增加项目数量。代码示例展示了首次渲染时如何触发滚动事件并动态加载内容。
🎯
关键要点
- 文章介绍了如何实现分页加载功能，用户滚动到底部时加载更多项目。
- 需要监测滚动位置，比较与文档主体的总高度。
- 使用 window.scrollY 获取页面垂直滚动的像素数。
- window.innerHeight 表示可见窗口的高度，document.body.offsetHeight 给出主体元素的总高度。
- 代码示例展示了如何使用 React 的 useEffect 钩子添加滚动事件监听器。
- 当用户接近页面底部时，增加项目数量。
- 首次渲染时触发 useEffect 钩子，添加滚动事件监听。
➡️
