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

在加载列表数据时，分页（pagination）是为了避免一次性加载大量数据，导致性能问题或用户体验不佳。分页主要有两种方式：基于索引的分页和基于游标的分页。让我们详细了解这两种分页方式及其应用场景。

基于索引的分页（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);
    });
  }
};

希望这些解释和示例能帮助你理解基于索引和基于游标的分页，以及它们在不同场景中的应用。