前言：
在项目中，我们往往需要香后端发起请求，而在函数组件中，如果直接用axios或者fetch的话，拿到的数据要渲染到UI上，往往是不方便的，所以需要引入react-query，来满足我们增删改查的基本操作
一、查数据：
1、导包
文章图片
2、用包中的QueryClientProvider组件包裹住整个App组件，并提供一个client
文章图片
home组件：
就直接使用useQusery方法即可。
文章图片
useQusery说明：
- 参数一：是一个
id，你随便取，但是要唯一，这个唯一键值将在内部用于在整个程序中重新获取数据、缓存和共享查询。 - 参数二：是一个一个返回 Promise 的函数
response结果吧：
文章图片
我们再把两个都展开吧
文章图片
【react|react简单入门--常用hook中useQuery（react-query）的使用】
response对象包含一些非常重要的状态，您需要注意这些状态才能提高工作效率。 在任何给定时刻，查询只能处于以下状态之一：- isLoading 或者 status === ‘loading’ - 查询没有数据，正在获取结果中
- isError 或者 status === ‘error’ - 查询遇到一个错误
- isSuccess 或者 status === ‘success’ - 查询成功，并且数据可用
- isIdle 或者 status === ‘idle’ - 查询处于禁用状态
- error - 如果查询处于isError状态，则可以通过error属性获取该错误
- data - 如果查询处于success状态，则可以通过data属性获得数据
- isFetching - 在其他任何状态下，如果查询在获取中（包括后台重新获取数据），则isFetching为true
文章图片
网络请求：
文章图片
推荐阅读
- react|react简单入门--常用hook中useMemo的使用（详细版）
- 前端|前端性能优化-综合篇
- 前端性能优化|前端性能优化--减少首屏加载时间--gzip压缩
- 项目优化|前端项目首屏加载优化--页面初始进来加载速度慢的解决方案
- 如何在JavaScript中从Twig安全地打印字符串变量
- 如何使用请求ip免费检测php或javascript中访客的国家
- 读《你不知道的javascript》(上)部分东西记录
- Codelobster（免费的PHP，HTML，CSS，JavaScript编辑器(IDE)）
- JavaScript运算符单竖杠＂|＂