前端 React 实现数据懒加载-滚动触底加载数据

在 React 中使用 Intersection Observer API 实现触底加载分页（无限滚动）

1.基本实现思路

• 在列表底部放置一个 哨兵元素（Sentinel）（如 <div>）。
• 使用 IntersectionObserver 监听该元素是否进入视口（即触底）。
• 触底时加载下一页数据，并更新列表。

2.完整代码实例

import { useState, useEffect, useRef } from 'react';function InfiniteScrollList() {const [data, setData] = useState([]); // 当前数据const [page, setPage] = useState(1);  // 当前页码const [loading, setLoading] = useState(false); // 加载状态const [hasMore, setHasMore] = useState(true);  // 是否还有更多数据const sentinelRef = useRef(null); // 哨兵元素的 ref// 模拟异步加载数据const fetchData = async () => {if (loading || !hasMore) return;setLoading(true);// 模拟 API 请求（替换为实际接口）const mockData = Array.from({ length: 10 }, (_, i) => `Item ${(page - 1) * 10 + i + 1}`);// 模拟延迟await new Promise(resolve => setTimeout(resolve, 1000));setData(prev => [...prev, ...mockData]);setPage(prev => prev + 1);setLoading(false);// 假设第 5 页后无数据if (page >= 5) setHasMore(false);};// 初始化 IntersectionObserveruseEffect(() => {if (!sentinelRef.current || !hasMore) return;const observer = new IntersectionObserver((entries) => {const [entry] = entries;if (entry.isIntersecting) {fetchData(); // 触底时加载数据}},{ threshold: 1.0 } // 当哨兵元素完全进入视口时触发);observer.observe(sentinelRef.current);return () => {if (sentinelRef.current) observer.unobserve(sentinelRef.current);};}, [page, hasMore, loading]); // 依赖项return (<div style={{ maxHeight: '400px', overflow: 'auto' }}><h2>无限滚动列表</h2><ul>{data.map((item, index) => (<li key={index} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>{item}</li>))}</ul>{/* 哨兵元素：用于检测触底 */}<div ref={sentinelRef} style={{ height: '20px' }}>{loading && <p>加载中...</p>}{!hasMore && <p>没有更多数据了</p>}</div></div>);
}export default InfiniteScrollList;

3.关键点说明

1. 哨兵元素（Sentinel）

   • 一个隐藏的 <div> 作为触底标记，通过 ref 绑定到 IntersectionObserver。

2. IntersectionObserver 配置

   • threshold: 1.0：当哨兵元素 100% 进入视口时触发回调。
   • 在 useEffect 中初始化并清理观察器，避免内存泄漏。

3. 加载控制逻辑

   • loading 防止重复请求。
   • hasMore 标记数据是否全部加载完毕。

4. 性能优化

   • 使用 useCallback 包裹 fetchData（如果函数逻辑复杂）。
   • 实际项目中，结合分页接口的 total 字段判断是否还有数据。

4.实际项目适配

• 替换 fetchData 中的模拟请求为真实 API 调用（如 axios 或 fetch）。
• 可加入防抖（Debounce）优化频繁触发问题（如快速滚动时）。