搞定无限刷：从入门到精通的避坑指南与选型实战

版本升级后 API 全变了？别慌，这是每个搞前端或后端开发的都绕不开的坎。今天咱们不整虚的，直接聊【无限刷】这个高频需求在 Vue 3、React 和原生 JS 中的底层逻辑差异。很多新手卡在“为什么我的滚动监听失效了”或者“数据加载卡死”上，其实核心就两点：视口检测机制和防抖节流策略。从入门到精通，不是背代码，而是懂原理。

1. 三种主流方案的定位与底层逻辑

在动手写代码前，先搞清楚这几种方案到底在干嘛。很多人把“无限滚动”简单理解为“滚到底就加载”，但这只是表象。

原生 Intersection Observer 这是浏览器原生提供的 API，性能最好，但兼容性要查一下。它不依赖 DOM 事件，而是通过异步回调通知你元素是否进入视口。适合对性能要求极高、不想引入额外依赖的项目。

Vue 3 Composition API + UseInfiniteScroll Vue 生态里，组合式函数（Composables）是主流。我们通常封装一个 useInfiniteScroll 钩子，内部利用 ref 和 watch 监听滚动位置。优点是响应式，状态管理清晰；缺点是如果列表数据量极大，Vue 的虚拟 DOM 更新可能会带来轻微开销。

React Hooks + useInfiniteQuery React 社区喜欢用数据获取库。TanStack Query (React Query) 的 useInfiniteQuery 是目前的事实标准。它把“分页加载”和“缓存”结合得最好，处理并发请求、错误重试、缓存失效都帮你做好了。

核心差异对比表

维度	原生 Intersection Observer	Vue 3 + Composables	React + TanStack Query
学习曲线	中等，需理解异步回调	低，贴合 Vue 响应式思维	中高，需理解 Hook 和 Query 概念
性能表现	⭐⭐⭐⭐⭐ (原生级)	⭐⭐⭐⭐ (依赖 Vue Diff)	⭐⭐⭐⭐⭐ (内部优化极佳)
代码侵入性	低，逻辑独立	中，需绑定 Ref	低，声明式配置
状态管理	需手动维护	自动响应式更新	自动缓存与状态同步
适用场景	轻量级 H5、工具站	中后台管理系统、企业应用	复杂数据流、高频交互应用
API 稳定性	极稳，W3C 标准	随 Vue 版本微调	库版本更新较快，但 API 稳

2. 代码写法深度对比

下面三段代码，分别展示了三种方案的核心实现。注意，这里去掉了业务逻辑，只保留“无限刷”的核心骨架。

方案一：原生 Intersection Observer

这种写法最底层，但最可控。关键在于 threshold 参数，建议设为 0.1，即元素 10% 进入视口时触发，比等到 0% 更顺滑。

// 原生实现：利用 IntersectionObserver API
function initInfiniteScroll() {const list = document.querySelector('#list');const sentinel = document.createElement('div'); // 哨兵元素sentinel.style.height = '1px'; // 高度极小，仅用于检测list.appendChild(sentinel);let loading = false;let page = 1;const observer = new IntersectionObserver((entries) => {if (entries[0].isIntersecting && !loading) {loading = true;// 模拟异步请求setTimeout(() => {const newData = fetchData(page);if (newData.length > 0) {appendItems(newData);page++;}loading = false;}, 500);}}, { threshold: 0.1 }); // 10% 可见时触发observer.observe(sentinel);
}

逐行解析：

哨兵元素（Sentinel）：这是关键技巧。我们不监听整个列表，而是监听列表末尾的一个空 div。当用户滚到底部，这个 div 进入视口，触发加载。这避免了频繁计算 scrollTop + clientHeight >= scrollHeight。
loading 标志位：必须加！防止网络延迟导致重复触发，造成接口被调用多次，数据重复渲染。

方案二：Vue 3 Composition API

Vue 开发者喜欢用 ref 绑定 DOM，用 watch 监听变化。这里我们封装一个简单的逻辑。

<script setup>
import { ref, onMounted, nextTick } from 'vue';const items = ref([]);
const page = ref(1);
const loading = ref(false);
const listRef = ref(null); // 绑定列表容器async function loadMore() {if (loading.value) return;loading.value = true;try {const res = await fetch(`/api/items?page=${page.value}`);const data = await res.json();items.value = [...items.value, ...data];page.value++;} finally {loading.value = false;}
}// 简单的滚动检测逻辑
function handleScroll() {const el = listRef.value;if (!el) return;// 距离底部 200px 时触发if (el.scrollTop + el.clientHeight >= el.scrollHeight - 200) {loadMore();}
}onMounted(() => {loadMore(); // 首次加载listRef.value.addEventListener('scroll', handleScroll);
});
</script><template><div ref="listRef" class="scroll-container"><div v-for="item in items" :key="item.id" class="item">{{ item.title }}</div><div v-if="loading" class="loading">加载中...</div></div>
</template>

避坑点：

nextTick 的重要性：如果在动态添加数据后立即检查滚动状态，DOM 可能还没更新完。虽然这里用了 scroll 事件，但如果改成 ResizeObserver 或检测列表高度变化，务必包裹在 nextTick 中。
事件解绑：在组件卸载时（onUnmounted），记得移除 scroll 监听器，防止内存泄漏。很多新手忘了这步，导致页面切换后还在疯狂请求接口。

方案三：React + TanStack Query

这是目前最优雅的写法。你不需要关心 scrollTop，也不需要手动管理 loading 状态。

import { useInfiniteQuery } from '@tanstack/react-query';
import { useInfiniteScroll } from 'react-intersection-observer'; // 或者自己写 reffunction InfiniteList() {const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({queryKey: ['items'],queryFn: ({ pageParam = 1 }) => fetchItems(pageParam),getNextPageParam: (lastPage) => lastPage.nextPage, // 判断是否有下一页});const { ref, inView } = useInfiniteScroll({rootMargin: '200px', // 提前 200px 加载，体验更好});// 当哨兵进入视口且还有下一页时，触发加载React.useEffect(() => {if (inView && hasNextPage && !isFetchingNextPage) {fetchNextPage();}}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);const allItems = data?.pages.flatMap((page) => page.items) || [];return (<div className="list">{allItems.map((item) => (<div key={item.id}>{item.title}</div>))}<div ref={ref} />{isFetchingNextPage && <div>Loading...</div>}{!hasNextPage && <div>No more items</div>}</div>);
}

核心优势：

声明式思维：你只告诉 React “我要什么数据”，它负责怎么取、怎么存、怎么显示。
内置防抖：isFetchingNextPage 天然防止了重复点击或滚动触发的重复请求。
缓存复用：如果用户返回上一页，数据直接从缓存读取，无需重新请求，体验秒开。

3. 适用场景与选型建议

没有银弹，只有最合适的工具。根据你的项目阶段和技术栈，选错方案会导致后期重构成本极高。

场景一：轻量级落地页或 H5 活动页

推荐：原生 Intersection Observer

理由：这类项目通常不需要复杂的状态管理，打包体积敏感。引入 React 或 Vue 可能过大。原生 API 零依赖，性能最佳。
注意：注意 IE11 不支持，需用 intersection-observer polyfill。

场景二：中后台管理系统

推荐：Vue 3 + Element Plus / Ant Design Vue

理由：中后台组件库通常封装好了表格和列表。Vue 的响应式系统让“列表更新”变得极其简单。配合 useInfiniteScroll 钩子，代码量最少，维护成本最低。
注意：如果列表项包含复杂的嵌套组件，注意 key 的唯一性，否则 Vue 的 Diff 算法会失效，导致滚动卡顿。

场景三：复杂数据流应用（如电商、社交）

推荐：React + TanStack Query

理由：这类应用涉及大量异步数据、缓存、乐观更新。TanStack Query 解决了 90% 的数据获取痛点。你只需要关注 UI 布局，数据逻辑交给库。
注意：学习曲线较陡，需要理解 Query Key 的设计。如果团队对 React 不熟，慎用。

4. 进阶技巧与避坑指南

1. 骨架屏（Skeleton Screen）

无限刷最糟糕的体验是“白屏等待”。务必在首次加载和翻页加载时显示骨架屏。

Vue：用 v-if 切换骨架组件。
React：用 isLoading 状态控制。
原生：CSS 动画模拟加载条。

2. 图片懒加载

无限刷通常伴随大量图片。图片不懒加载，首屏速度会极慢。

使用 <img loading="lazy"> 原生属性（Chrome 76+）。
或使用 react-lazyload、vue-lazyload 等库。
关键点：图片懒加载的阈值也要和无限刷的阈值配合，通常设为视口外 500px 预加载。

3. 虚拟滚动（Virtual Scrolling）

如果列表数据量超过 1000 条，即使无限刷，DOM 节点也会过多，导致滚动掉帧。

解决方案：结合虚拟列表。只渲染可视区域内的 DOM。
库推荐：react-window、vue-virtual-scroller。
难点：虚拟滚动与无限刷结合时，高度计算非常复杂。建议先实现无限刷，数据量大了再引入虚拟滚动，不要一上来就搞复杂架构。

4. 网络异常处理

重试机制：请求失败时，提供“点击重试”按钮，而不是静默失败。
错误提示：Toast 提示“网络异常，请检查网络”。
数据去重：网络抖动可能导致同一条数据返回两次，前端需根据 id 去重。

5. 选型建议与总结

回到开头的问题，版本升级后 API 全变了怎么办？答案是：拥抱框架的标准做法，而不是造轮子。

如果你用 Vue，就老老实实用 Composition API 封装钩子，参考官方文档推荐的 useAsyncData 或社区成熟的 @vueuse/core 库。
如果你用 React，直接用 TanStack Query，不要自己写 useEffect 去监听滚动，那是 2019 年的玩法。
如果你用原生，就用 Intersection Observer，别用 scroll 事件硬算。

最后，给你一个选型决策树：

项目有框架吗？
- 有 Vue → 用 Vue 3 Hooks
- 有 React → 用 TanStack Query
- 无框架 → 用原生 Intersection Observer
数据量超过 1000 条吗？
- 是 → 必须引入虚拟滚动
- 否 → 普通无限刷即可
需要缓存吗？
- 是 → React Query 或 Vuex/Pinia 持久化
- 否 → 普通请求即可