分页与无限滚动

-- 偏移分页：第 3 页，每页 20 条，跳过前 40 条，没问题
SELECT id, title FROM article ORDER BY id DESC LIMIT 40, 20;

-- 翻到第 5000 页：MySQL 没有捷径，按索引顺序扫过前 99980 行，
-- 全部丢弃，再返回 20 行。页越深，白扔的越多
SELECT id, title FROM article ORDER BY id DESC LIMIT 99980, 20;

-- 游标分页（keyset pagination）：拿上一页最后一条的 id 做锚点
SELECT id, title FROM article WHERE id < 99981 ORDER BY id DESC LIMIT 20;

import { useState } from "react";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { fetchOrders } from "./api";

function OrderList() {
  const [page, setPage] = useState(1);

  const { data, isPending, isPlaceholderData } = useQuery({
    // 每页一条缓存：page 进 key，翻回旧页直接命中
    queryKey: ["orders", "list", page],
    queryFn: () => fetchOrders(page, 20),
    // v5 写法：换页瞬间先用上一页数据占位，新页在后台取
    placeholderData: keepPreviousData,
  });

  if (isPending) return <p>首次加载中…</p>;

  return (
    <div style={{ opacity: isPlaceholderData ? 0.6 : 1 }}>
      <ul>
        {data.items.map((o) => (
          <li key={o.id}>{o.orderNo} · {o.amount} 元</li>
        ))}
      </ul>
      <button disabled={page <= 1} onClick={() => setPage(page - 1)}>
        上一页
      </button>
      <span>第 {page} / {data.totalPages} 页</span>
      <button
        disabled={isPlaceholderData || page >= data.totalPages}
        onClick={() => setPage(page + 1)}
      >
        下一页
      </button>
    </div>
  );
}

import { useInfiniteQuery } from "@tanstack/react-query";

interface FeedPage {
  items: { id: number; title: string }[];
  nextCursor: number | null;
}

async function fetchFeed(cursor: number | null): Promise<FeedPage> {
  const qs = cursor === null ? "" : `&cursor=${cursor}`;
  const res = await fetch(`/api/feed?size=20${qs}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

function Feed() {
  const { data, isPending, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      queryKey: ["feed"],
      queryFn: ({ pageParam }) => fetchFeed(pageParam),
      initialPageParam: null as number | null, // v5 必填：第一页没有游标
      // 下一页的游标从上一页响应里取；返回 undefined 表示到底了
      getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
    });

  if (isPending) return <p>加载中…</p>;

  // pages 是已加载的每一页，flatMap 摊平成一条连续的流
  const items = data.pages.flatMap((p) => p.items);

  return (
    <div>
      {items.map((it) => (
        <article key={it.id}>{it.title}</article>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? "加载中…" : hasNextPage ? "加载更多" : "没有更多了"}
      </button>
    </div>
  );
}

import { useEffect, useRef } from "react";

// 哨兵元素进入视口时回调 onIntersect
function useIntersection(onIntersect: () => void, enabled: boolean) {
  const sentinelRef = useRef<HTMLDivElement | null>(null);

  // 回调放进 ref：观察器只注册一次，触发时拿到最新回调（防闭包过期，第 10 篇）
  const cbRef = useRef(onIntersect);
  cbRef.current = onIntersect;

  useEffect(() => {
    const el = sentinelRef.current;
    if (!el || !enabled) return;

    const io = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) cbRef.current();
      },
      { rootMargin: "200px 0px" } // 还差 200px 就提前加载，用户无感
    );
    io.observe(el);
    return () => io.disconnect(); // 卸载断开观察（第 9 篇的清理纪律）
  }, [enabled]);

  return sentinelRef;
}

export default useIntersection;

// Feed 里删掉按钮，列表末尾挂哨兵
const sentinelRef = useIntersection(
  () => {
    if (hasNextPage && !isFetchingNextPage) fetchNextPage();
  },
  hasNextPage === true // 没有下一页就不再观察
);

// JSX 末尾放哨兵元素：一个几乎不可见的 div，负责「露脸报信」
// <div ref={sentinelRef} style={{ height: 1 }} />