每一个信息流、每一条聊天记录、每一个搜索结果页面最终都会提出同一个问题：当用户滚动到底部时，我该如何加载更多内容？ 天真的解决方案——一个滚动监听器、一些关于 scrollHeight 和 clientHeight 的算术运算、一个防止重复获取数据的布尔值——大概需要 30 行代码，而每一行都是一个陷阱。你可能会忘记清理监听器。你可能会比较错误的维度。你可能会在组件挂载时、还没有任何可滚动内容之前就触发回调。你可能会硬编码“底部”，然后产品部门要求做一个向上加载历史记录的聊天功能。你可能会跳过节流处理，导致当用户将滚动位置保持在阈值处时，回调被触发了 60 次。
@reactuses/core 中的 useInfiniteScroll 通过一次调用即可替代上述所有操作：将其指向一个可滚动元素，提供一个加载更多数据的函数，其余的工作——到达检测、方向、距离阈值、滚动位置保持以及清理——都由它来处理。本文将深入探讨真实的实现细节、重要的选项配置，以及适用于信息流、聊天界面和水平轮播图的实践模式。优先使用 TypeScript。
最简单的情况：在底部加载更多
import { useRef, useState } from 'react';
import { useInfiniteScroll } from '@reactuses/core';
function Feed() {
const containerRef = useRef<HTMLDivElement>(null);
const [items, setItems] = useState<string[]>(() =>
Array.from({ length: 20 }, (_, i) => `项目 ${i + 1}`)
);
useInfiniteScroll(containerRef, async () => {
const newItems = await fetchMoreItems(items.length);
setItems(...免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
