React Query 入门教程

React Query 是一个用于管理 React 应用状态的库，提供简单、统一的方法来获取、缓存和更新数据，并且支持常见的数据操作，例如查询参数、分页、排序和搜索等等。

下面是使用 React Query 的入门教程：

1. 安装 React Query

使用 npm 安装 React Query：

npm install react-query

使用 yarn 安装

yarn add react-query

2. 创建 Query

使用 useQuery 钩子创建一个 Query：

import { useQuery } from 'react-query';
function Demo() {
  const { data, isLoading, error } = useQuery('todos', () =>
    fetch('https://domain/todos').then((res) =>
      res.json()
    )
  );
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

这个 Query 使用 fetch 获取 https://domain/todos 的数据，并将其存储在名为 todos 的缓存中。如果数据还未缓存，useQuery 将立即使用提供的函数进行获取并缓存。

3. 组件状态管理

React Query 让你可以从组件层面管理状态。例如，你可以用 Query 的 isFetching 属性检查 Query 是否正在获取数据，并且可以使用 isLoading 属性在数据加载期间显示 loading 状态。

import { useQuery } from 'react-query';
function Demo() {
  const { data, isLoading, error, isFetching } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then((res) =>
      res.json()
    )
  );
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
      {isFetching ? <p>Updating...</p> : null}
    </>
  );
}

4. 处理并发请求

React Query 提供了一个 useQueries 钩子函数，可以一次处理多个 Query。在一些场景下这非常有用，你的组件可能需要同时获取多个数据集合。

import { useQueries } from 'react-query';
function Example() {
  const queries = useQueries([
    {
      queryKey: 'todos',
      queryFn: () =>
        fetch('https://domain/todos').then((res) =>
          res.json()
        ),
    },
    {
      queryKey: 'users',
      queryFn: () =>
        fetch('https://domain/users').then((res) =>
          res.json()
        ),
    },
  ]);
  const [todos, users] = queries;
  if (todos.isLoading || users.isLoading) return <p>Loading...</p>;
  if (todos.error || users.error)
    return <p>Error: {(todos.error || users.error).message}</p>;
  return (
    <>
      <h2>Todos</h2>
      <ul>
        {todos.data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
      <h2>Users</h2>
      <ul>
        {users.data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  );
}

以上就是 React Query 的简单教程。React Query 提供了更多的选项和高级功能，如 mutation、缓存策略、自动重试等，可以在react query 文档中找到更详细的信息。

更多React组件可查看：React组件汇总