程序员不得不做的低级工作，让你优雅的管理状态

前端

2023-12-25 15:45:14

React-Query 让你把更多精力聚焦在 UI

在使用 React Hooks 编写组件时，我们常需要手动维护来自服务器的处理状态。这引起了日常开发中的一些麻烦，尤其是在我们处理异步数据时。

一些常见的场景包括：

当数据更新时，我们如何确保组件重新渲染？
我们如何缓存数据以避免重复请求？
如果请求失败，我们如何重新获取数据？

React-Query 旨在通过帮助你自动管理这些任务，从而让你能够专注于构建用户界面。它是一个适用于 React Hooks 的轻量级 JavaScript 库，它可以让你轻松地：

缓存数据，这样你就不必在每次重新渲染组件时都去请求服务器了。
更新数据，这样你就不必担心手动更新组件状态了。
重新获取数据，这样你就可以在请求失败时轻松地重试。

React-Query 易于设置和使用。你只需将它安装到你的项目中，然后开始使用它的 useQuery() 钩子。useQuery() 钩子接受一个查询键和一个查询函数作为参数。查询键用于标识查询，查询函数用于从服务器获取数据。

以下是一个使用 React-Query 的示例：

import React, { useState } from "react";
import { useQuery } from "react-query";

const MyComponent = () => {
  const [queryKey] = useState("todos");

  const query = useQuery(queryKey, async () => {
    const response = await fetch("/api/todos");
    return response.json();
  });

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

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

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

export default MyComponent;