### 使用 IntersectionObserver 实现
Antd Table 的懒加载或虚拟
分页
Intersection Observer 是一种高效的 API，用于监听目标元素何时进入视口范围。通过结合 Ant Design 的 `Table` 组件，可以实现类似于
分页的效果，但实际上并不需要手动翻页，而是当用户滚动到表格底部时自动加载更多数据。
以下是具体实现方法：
#### 1
. 创建一个可观察的目标元素
为了触发懒加载行为，在表格的最后一行创建一个占位符 DOM 元素作为观察对象。这个元素将在每次新数据追加
完成后重新定位到最后。
```
jsx
const observerTarget = () => (
<tr>
<td colSpan={columns
.length}>
<div ref={setObserverRef} style={{ height: '1px' }} />
</td>
</tr>
);
```
此处的 `ref={setObserverRef}` 将绑定至实际的 DOM 节点以便后续由 IntersectionObserver 进行监控[^5]。
#### 2
. 初始化 IntersectionObserver 并定义回调
函数
设置 IntersectionObserver 来检测该占位符是否进入了可视区域。一旦它被看到，则调用服务端接口获取额外的数据并更新状态。
```javascript
useEffect(() => {
const options = {
root: null,
rootMargin: '0px',
threshold: 1
.0 // 当完全可见时触发
};
const callback = (entries, observer) => {
entries
.forEach(entry => {
if (entry
.isIntersecting && !isLoadingMore) {
setIsLoadingMore(true); // 防止重复请求
fetch
NextPage()
.then(() => setIsLoadingMore(false));
}
});
};
const observerInstance = new IntersectionObserver(callback, options);
if (observerRef
.current) {
observerInstance
.observe(observerRef
.current);
}
return () => observerInstance
.disconnect();
}, [isLoadingMore]);
```
这里需要注意的是要防止多次连续触发展开逻辑，因此引入了一个布尔变量 `isLoadingMore` 控制并发问题[^6]。
#### 3
. 更新表单数据源
每当接收到新的响应结果之后都需要将其附加到现有的记录集合后面形成完整的展示列表。
```javascript
async function fetch
NextPage() {
try {
const response = await fetchData(currentPageIndex * pageSize, pageSize);
setCurrentPageIndex(prevIndex => prevIndex + 1);
setDataSource(prevData => [
...prevData,
...response
.data]);
} catch (error) {
console
.error('Failed to load more data:', error);
}
}
```
此部分假设存在某种形式的服务端支持允许基于偏移量查询指定数量的结果集[^7]。
#### 完整示例代码片段
下面给出了一段综合以上各要点的实际应用例子供参考学习之用:
```tsx
import React, { useState, useEffect, useRef } from 'react';
import { Table } from '
antd';
const LazyLoadTable = ({ columns }) => {
const [dataSource, setDataSource] = useState([]);
const [currentPageIndex, setCurrentPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(20);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const observerRef = useRef(null);
useEffect(() => {
const options = {
root: null,
rootMargin: '0px',
threshold: 1
.0
};
const callback = (entries, observer) => {
entries
.forEach((entry) => {
if (entry
.isIntersecting && !isLoadingMore) {
setIsLoadingMore(true);
fetch
NextPage()
.catch(err => console
.log(`Error fetching
next page`, err))
.finally(() => setIsLoadingMore(false));
}
});
};
const observerInstance = new IntersectionObserver(callback, options);
if (observerRef
.current) {
observerInstance
.observe(observerRef
.current);
}
return () => observerInstance
.disconnect();
}, [isLoadingMore]);
async function fetch
NextPage() {
const newData = await mockApiCall(currentPageIndex * pageSize, pageSize);
setCurrentPageIndex(prevIndex => prevIndex + 1);
setDataSource(prevData => [
...prevData,
...newData]);
}
const setObserverRef = el => {
if (el) {
observerRef
.current = el;
}
};
return (
<>
<Table
dataSource={dataSource}
columns={columns}
pagination={false}
scroll={{ y: 400 }}
>
<tbody>
{/* 动态生成的内容 */}
{Array
.isArray(dataSource) &&
dataSource
.map(row => (
<tr key={row
.key}>
{columns
.map(col => (
<td>{col
.render?
.(row[col
.dataIndex]) || row[col
.dataIndex]}</td>
))}
</tr>
))}
{/* 加载指示器 */}
{isLoadingMore && (
<tr>
<td colSpan={columns
.length}>正在加载
...</td>
</tr>
)}
{/* 可见性探测器 */}
{!isLoadingMore && (
<tr>
<td colSpan={columns
.length}>
<div ref={setObserverRef} style={{ height: '1px' }}></div>
</td>
</tr>
)}
</tbody>
</Table>
</>
);
};
export default LazyLoadTable;
```
---
###
最低0.47元/天 解锁文章
扫一扫
1086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
