告别手动管理：React Query 助你优雅获取数据

在构建复杂的 React 应用时，数据获取和状态管理一直是个挑战。传统的 useEffect 配合 useState 的方式，很容易陷入回调地狱，代码可维护性差。如果使用了 Redux 或 Mobx 等全局状态管理工具，又会引入额外的复杂度。React Query 的出现，正是为了解决这些痛点。它提供了一套优雅的声明式 API，帮助我们简化 React 应用中的数据获取、缓存、更新和状态管理，从而提高开发效率和用户体验。

问题场景：手动管理数据请求的痛点

假设我们需要在一个 React 组件中获取用户列表并展示。使用传统的 useEffect，代码可能如下所示：

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      try {
        const response = await fetch('/api/users');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

这段代码虽然简单，但也暴露了一些问题：

• 大量的样板代码：我们需要手动管理 loading、error 等状态。
• 缓存失效：当组件重新渲染时，会重新发起请求，浪费资源。
• 错误处理：需要手动处理 try...catch 块，代码冗余。

React Query 核心概念与底层原理

React Query 通过提供 useQuery、useMutation 等 Hook，简化了数据获取和状态管理。它的核心原理如下：

1. Query Key：useQuery 接收一个唯一的 queryKey，用于标识数据。React Query 内部使用这个 key 来管理缓存。
2. Query Function：useQuery 接收一个 queryFn，用于发起数据请求。React Query 会自动处理请求的 loading、error 和 data 状态。
3. 缓存机制：React Query 默认会缓存数据，避免重复请求。可以通过配置 staleTime 和 cacheTime 来控制缓存策略。类似于 Nginx 缓存配置中的 proxy_cache_valid 指令，可以控制不同状态码的缓存时间。如果数据过期，React Query 会在后台自动重新获取数据。
4. 自动重试：当请求失败时，React Query 会自动重试，提高应用的稳定性。可以通过配置 retry 和 retryDelay 来控制重试策略。
5. Invalidation：当数据发生变化时，可以通过 queryClient.invalidateQueries 方法，手动使缓存失效，强制 React Query 重新获取数据。这类似于手动清除 Redis 缓存。

使用 React Query 简化数据获取

使用 React Query 重写上面的例子：

import React from 'react';
import { useQuery } from '@tanstack/react-query';

async function fetchUsers() {
  const response = await fetch('/api/users');
  return response.json();
}

function UserList() {
  const { data: users, isLoading, error } = useQuery(['users'], fetchUsers); // queryKey 是 ['users'], fetchUsers 是 queryFn

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

可以看到，代码大大简化，不再需要手动管理 loading、error 等状态。React Query 会自动处理这些细节。

实战避坑：常见问题与解决方案

1. Query Key 的唯一性：queryKey 必须是唯一的，否则会导致数据混乱。建议使用数组作为 queryKey，并包含所有相关的变量。例如，如果需要根据用户 ID 获取用户信息，可以将 queryKey 设置为 ['user', userId]。

   

2. 数据依赖：如果一个 Query 依赖于另一个 Query 的结果，可以使用 enabled 选项来控制 Query 的执行。例如：

   const { data: user } = useQuery(['user', userId], () => fetchUser(userId), { enabled: !!userId });
   

   只有当 userId 不为空时，才会执行 fetchUser 函数。

   

3. Mutation 的使用：useMutation 用于处理数据更新操作，例如 POST、PUT、DELETE 请求。它提供了 mutate 方法来触发请求，以及 isLoading、error 和 data 等状态。

4. 服务端渲染 (SSR)：在使用 Next.js 等框架进行服务端渲染时，需要注意在服务端预取数据。可以使用 getQueryClient 和 prefetchQuery 方法来实现。

5. 配合 TanStack Router 使用: React Query 可以与 TanStack Router 无缝集成，方便地在路由改变时刷新数据。这类似于后端使用 Nginx 反向代理时，根据不同的 URL 匹配规则来路由到不同的后端服务。

总而言之，React Query 是一个非常强大的数据获取和状态管理工具，可以帮助我们编写更简洁、更高效的 React 应用。熟练掌握它的核心概念和使用方法，将极大地提高我们的开发效率。