文章目录
前言
最近团队中用了react-query,了解了一下之后确实挺好玩的,简单记录一下
一、react-query能干嘛?
在前端平时的开发中,可以把我们需要维护的状态分为两类:
- 用户交互的中间状态。如组件的状态,isLoading, isOpen
- 服务端状态。通过请求得到并在前端维护
react-query能够更好的帮助我们处理第二类状态。服务端状态通常会存在组件中,如果要复用,要存在全局状态如redux中。但这样有两个问题:
- 需要重复处理请求中间状态,比如loading,error的判断,每次都要写
- 不同于交互的中间状态,服务端状态更应被归类为「缓存」,对于不同组件要共享的缓存,还要考虑「缓存」的失效和更新
而react-query可以无痛的完全替我们处理这些问题:
- 在hooks内部封装loading,error等方便直接使用
- 多个组件请求同一个query时只发出一个请求
- 缓存数据失效/更新策略(判断缓存合适失效,失效后自动请求数据)
二、常见用例
1.引入库
代码如下(示例):
import {
useQuery } from 'react-query';
2.请求useQuery
代码如下(示例):
// 通过useQuery请求数据,hook返回的data和isLoding都可以直接使用
// 除了data,isLoading,还有其他返回如 status,error,isFetching等等
const {
data, isLoading } = useQuery(
// useQuery的第一个参数:查询的唯一key,要求必须是可序列化的
['statData', {
date, group }],
// useQuery的第二个参数:查询函数,要求必须是返回Promise的函数
// 在查询函数中,也可以提取到key中的参数,比如
// const [_key, { date, department }] = queryKey;
async () => {
const {
data: dataObj } = await fetchStatData({
year: date.getFullYear(),
month: date.getMonth(),
deptId: group ? group.id : '',
});
return dataObj;
},