React Query

梗概

React Query 是一个用于管理和缓存服务端数据的强大库，专注于简化 React 应用中数据获取、缓存和同步的流程。它通过声明式的 API 使得开发者能够更高效地处理异步请求，自动管理请求状态（如加载中、错误、成功等），并且内置了多种高级特性，如自动重试、后台刷新和分页等。

核心概念

• Query（查询）
  用于获取和缓存服务端数据。每个 query 都有唯一的 key 来标识，React Query 会根据这个 key 自动管理缓存和更新。

• Mutation（变更）
  用于创建、更新或删除服务器上的数据。与 query 不同的是 mutation 通常是触发某个操作而不是持续订阅数据。

• Cache（缓存）
  React Query 会在内存中保存请求结果，避免重复请求，并能智能地刷新缓存以保证数据新鲜度。

• Query Client
  管理所有 query 和 mutation 的实例，通常在应用根组件初始化。

主要功能与优势

• 自动缓存与更新：避免不必要的数据请求，提高性能。
• 支持后台刷新：当页面处于后台时自动重新拉取最新数据。
• 请求去抖动与合并：防止短时间内重复发送相同请求。
• 易用的状态管理：通过 hooks 获取请求状态，无需手动维护 loading/error 状态。
• 内置分页、无限加载支持：方便实现复杂的数据展示需求。
• 集成 Devtools：便于调试查询状态和缓存情况。

基础使用示例

import { useQuery } from 'react-query';
 
function fetchUser(id) {
  return fetch(`/api/user/${id}`).then(res => res.json());
}
 
function UserProfile({ userId }) {
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));
 
  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error loading user data</span>;
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}