当前位置：首页 > news >正文

React Query

news 来源：原创 2025/4/30 20:28:31

React Query 是一个用于管理 React 应用程序中服务器状态的库。它通过提供一系列工具和钩子，简化了数据获取、缓存、同步、和更新的流程。React Query 特别适合处理复杂的数据获取逻辑，使开发者能够轻松管理从服务器获取的数据，同时保持用户界面响应迅速和数据最新。

React Query 的核心概念

Queries：用于从服务器获取数据。通过 useQuery 钩子，开发者可以指定查询键和数据获取函数，React Query 会自动处理请求、缓存和更新。
```
import { useQuery } from 'react-query';

const { data, error, isLoading } = useQuery('todos', fetchTodos);
```

Mutations：用于创建、更新或删除数据。通过 useMutation 钩子，开发者可以执行这些操作，并自动处理缓存的更新。

import { useMutation, useQueryClient } from 'react-query';

const queryClient = useQueryClient();

const mutation = useMutation(addTodo, {
    onSuccess: () => {
        queryClient.invalidateQueries('todos');
    },
});

Query Invalidation：当数据发生变化时，React Query 提供了无效化查询的功能，以确保显示的数据是最新的。比如在上面的例子中，当一个新的 TODO 项被添加时，无效化 todos 查询使其重新获取数据。
Automatic Refetching：React Query 会在数据过期、窗口重新聚焦、网络重新连接等事件发生时自动重新获取数据，确保用户始终看到最新的数据。
Caching：React Query 会缓存查询结果，并根据指定的缓存时间自动过期。这减少了不必要的网络请求，提升了应用性能。
Polling and Background Fetching：支持定时轮询和后台获取数据功能，适用于实时性要求较高的应用。
Devtools：React Query 提供了强大的开发者工具，可以在开发过程中更直观地查看和管理查询状态、缓存和请求历史。

React Query 的基本使用示例

import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const queryClient = new QueryClient();

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Todos />
        </QueryClientProvider>
    );
}

function Todos() {
    const { data, error, isLoading } = useQuery('todos', fetchTodos);

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <ul>
            {data.map(todo => (
                <li key={todo.id}>{todo.title}</li>
            ))}
        </ul>
    );
}

async function fetchTodos() {
    const response = await fetch('/api/todos');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
}