react query初探 | 青训营笔记

在不同组件之间交换数据之前，构建全栈应用程序是不完整的。全栈应用是指能够进行CRUD操作。全栈应用程序最重要的方面是交换数据的能力。有不同的方法可以做到这一点，从使用Fetch API到使用自定义 useFetch 钩子，再到使用 Axios 库，等等。React Query 是一个库，可帮助我们在 React 应用程序中执行 CRUD 操作，帮助我们管理状态、同步、缓存和错误处理。

什么是react query库

React Query 是一个 ReactJS 预配置数据管理库，它使我们能够以简单和声明的方式控制服务器端状态管理、数据的获取和缓存以及错误处理，而不会影响应用程序的全局状态。

服务器数据是异步的——它很容易过时，这是因为数据没有存储在你的 React 应用程序中。这就是 Query 库的亮点，它允许您操作异步数据、缓存它，以及更新陈旧数据或同步它。

React Query 是一个非常好的工具，因为它有助于服务器状态数据管理。这意味着不再需要担心将所有内容都保持在标准的全局状态，因为大多数库都是为处理客户端状态而创建的，而服务器状态则大不相同。 React Query 十分好，这个库将帮助我们 获取、 同步、 更新和 缓存 我们的远程数据，同时还通过为我们提供两个简单的钩子和一个实用函数来减少我们需要编写的代码量。使用 React Query，我们无需像其他库那样编写样板代码以使其能够使用 React 发布。

使用 React Query Library 从 API 获取数据

导入 QueryClientProvider 和 QueryClient 在 App.js 中:

// App.js
import { QueryClient, QueryClientProvider } from  "react-query";
import { ReactQueryDevtools } from  ``"react-query-devtools";
const queryClient =  new QueryClient({});
const App = () => {
   return  (
      <QueryClientProvider client={queryClient}>
         {/* The rest of your application */}
         <ReactQueryDevtools initialIsOpen={true} />
         </QueryClientProvider>
     );
  };
export  default App;