WHAT - 分页中基于索引和基于游标

2025/5/7 15:40:33 来源：https://blog.csdn.net/weixin_58540586/article/details/140440395 浏览: 次关键词：WHAT - 分页中基于索引和基于游标

基于索引的分页（Offset Pagination）

基于索引的分页通过指定要跳过的记录数量（offset）和要获取的记录数量（limit）来实现。例如，在一个 SQL 查询中可以使用 LIMIT 和 OFFSET 子句：

SELECT * FROM articles
ORDER BY created_at DESC
LIMIT 10 OFFSET 20;

这个查询将获取从第21条到第30条的记录。

优点：

实现简单，直观。
容易理解和实现，适合初学者。

缺点：

当数据量非常大时，性能可能下降，因为需要扫描并跳过大量记录。
在数据频繁变动的情况下（如插入或删除），容易导致分页不一致问题。

基于游标的分页（Cursor Pagination）

基于游标的分页通过使用游标（cursor）来标记数据的边界位置，通常使用唯一且有序的字段（如时间戳或自增ID）来实现分页。例如：

SELECT * FROM articles
WHERE created_at < '2024-07-15T00:00:00'
ORDER BY created_at DESC
LIMIT 10;

这个查询将获取 created_at 在 '2024-07-15T00:00:00' 之前的10条记录。游标可以是某一记录的唯一标识符，下一页的查询则使用前一页最后一条记录的标识符。

优点：

性能较好，尤其是数据量大时，因为只需要处理相关的记录。
更适合实时变化的数据，能够避免分页不一致的问题。

缺点：

实现较复杂，需要处理游标的生成和解析。
对于没有自然排序的字段，可能需要额外处理。

适用场景

基于索引的分页 适用于：
- 数据集较小且变化不频繁。
- 对一致性要求不高的场景。
- 快速实现原型或简单应用。
基于游标的分页 适用于：
- 数据集较大或数据变化频繁。
- 需要高性能和一致性的应用，如社交媒体动态、电子商务网站的商品列表等。

示例代码

基于索引的分页（React/TypeScript 示例）

async function fetchArticles(offset: number, limit: number): Promise<Article[]> {const response = await fetch(`/api/articles?offset=${offset}&limit=${limit}`);return await response.json();
}// Usage
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(0);
const limit = 10;useEffect(() => {fetchArticles(page * limit, limit).then(newArticles => {setArticles(newArticles);});
}, [page]);

基于游标的分页（React/TypeScript 示例）

async function fetchArticles(cursor: string | null, limit: number): Promise<{ articles: Article[], nextCursor: string | null }> {const response = await fetch(`/api/articles?cursor=${cursor}&limit=${limit}`);return await response.json();
}// Usage
const [articles, setArticles] = useState<Article[]>([]);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const limit = 10;useEffect(() => {fetchArticles(null, limit).then(({ articles: newArticles, nextCursor }) => {setArticles(newArticles);setNextCursor(nextCursor);});
}, []);const loadMore = () => {if (nextCursor) {fetchArticles(nextCursor, limit).then(({ articles: newArticles, nextCursor }) => {setArticles(prevArticles => [...prevArticles, ...newArticles]);setNextCursor(nextCursor);});}
};