React 查询：无限滚动

在这篇文章中我们将谈谈 React Query 这个状态管理工具提供的一个令人惊叹的功能，即无限滚动（Infinite Scroll）。

介绍

可能你已经在每个社交媒体平台上看到了这个功能，比如 Twitter、Facebook、LinkedIn 等。在这些平台上，我们不再使用传统的分页，而是通过无限滚动来加载数据。没有上一页或下一页的按钮，数据会根据需要自动生成。但在底层，无限滚动仍然是分页的一种形式。

下面让我们看看代码吧！

上手

JSON Placeholder 页面##

首先，在我们的项目中创建 Todos 组件的文件夹：src/Todo/index.tsx。

在其他情况下，我可能会创建一个 types.ts 文件来存放我们的类型，但这次我们只会在这个文件中使用。因此，我将在我们的组件中创建类型。此外，我将添加 MAX_POST_PAGE 常量。

代码语言：tsx复制

// src/Todo/index.tsx
const MAX_POST_PAGE = 10;

interface TodoType {
  id: number;
  title: string;
}

因此，我们将有一个限制为 10 的 MAX_POST_PAGE 和我们的 Todo 类型，该类型只使用 id 和 title。

接下来让我们创建用于获取数据的函数：

代码语言：tsx复制

// src/Todo/index.tsx
const fetchTodos = async ({ pageParam }: { pageParam: number }) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos?_pages=${pageParam}&_limit=${MAX_POST_PAGE}`
  );
  const todos = (await response.json()) as TodoType[];
  return todos;
};

要注意，该函数将接收 pageParam，表示页码。我会将其作为对象接收并使用解构。

代码语言：tsx复制

// src/Todo/index.tsx
const MAX_POST_PAGE = 10;

interface TodoType {
  id: number;
  title: string;
}

const fetchTodos = async ({ pageParam }: { pageParam: number }) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos?_pages=${pageParam}&_limit=${MAX_POST_PAGE}`
  );
  const todos = (await response.json()) as TodoType[];
  return todos;
};

export const Todo = () => {
  return <></>;
};

接下来我们创建来 Todo 组件的内容。

使用 useRef 钩子创建一个观察者引用，并将 IntersectionObserver 类型作为泛型传递，如下所示：

代码语言：tsx复制

// src/Todo/index.tsx
const observer = useRef<IntersectionObserver>();

观察者是一种设计模式，定义了对象之间的一对多依赖关系，以便当对象更改状态时，所有依赖项都会被通知并自动更新。观察者，顾名思义，将观察某个对象的状态。如果依赖项更新，正在监听（观察）的对象将被通知。

但你可能会想