React-Query学习及实践总结

本文总结了React-Query的使用,包括其在处理服务端状态的优势,如自动管理loading、error,智能缓存与更新策略。文章详细介绍了useQuery、useInfiniteQuery、并行查询、状态指示器、查询禁用、分页处理、数据占位符、mutations及其引发的缓存失效等常见用例,旨在提供React应用中高效的数据管理解决方案。
摘要由CSDN通过智能技术生成


前言

最近团队中用了react-query,了解了一下之后确实挺好玩的,简单记录一下


一、react-query能干嘛?

在前端平时的开发中,可以把我们需要维护的状态分为两类:

  1. 用户交互的中间状态。如组件的状态,isLoading, isOpen
  2. 服务端状态。通过请求得到并在前端维护

react-query能够更好的帮助我们处理第二类状态。服务端状态通常会存在组件中,如果要复用,要存在全局状态如redux中。但这样有两个问题:

  1. 需要重复处理请求中间状态,比如loading,error的判断,每次都要写
  2. 不同于交互的中间状态,服务端状态更应被归类为「缓存」,对于不同组件要共享的缓存,还要考虑「缓存」的失效和更新

而react-query可以无痛的完全替我们处理这些问题:

  1. 在hooks内部封装loading,error等方便直接使用
  2. 多个组件请求同一个query时只发出一个请求
  3. 缓存数据失效/更新策略(判断缓存合适失效,失效后自动请求数据)

二、常见用例

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;
    },
    
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值