React Query 实战教程:在 React 中如何优雅的管理接口数据状态?

前言

如何通过Ajax或者Fetch优雅的请求后端接口,这是所有复杂前端项目都需要考虑处理的事情。在React项目中,有不少成熟的Hook能够让开发者管理整个请求过程中的数据和状态,例如 axios-hooksuse-httpreact-queryswr甚至 ahook中提供的 useRequest

我曾经很长一段时间是直接使用 ahook中的 useRequest ,但是有的项目中不需要 ahook 中的其他hook,我又不愿意仅仅为了使用 useRequest 而在项目中引入 ahook 。就像我第参与的一个前端项目中仅仅为了使用 jquery$.ajax而引入 jquery,至今我都在怀疑当时前端负责人的真实水平。

最开始听说 react-query 时,我还以为它是处理URL字符串的工具库,随着慢慢熟练使用 react-query 后发现是真的很好用。本文将详细介绍 react-query 的功能、优势以及如何使用。

React Query 介绍

React Query 是一个与数据无关的、强大的数据同步库。它通过提供一些 Hooks,可以帮助我们以简单的方式同步后端数据到我们的 React 组件中。

React Query 对于数据获取、同步、缓存、更新等操作提供了极好的解决方案。

解决问题

  1. 网络请求的缓存和更新

    React Query 自动处理缓存、数据的更新和废弃,不需要手动操作,简化操作流程。

  2. 后台更新

    React Query 可以在后台静默更新数据,不影响用户的使用体验。

  3. 调试工具

    React Query Devtools 提供了全面的调试支持,使数据流的控制和错误的追踪更为容易。

使用步骤

1. 安装依赖

npm install react-query

2. 配置全局Provider

为了让 React Query 在你的整个应用中都能工作,需要在应用的根组件设置一个**QueryClientProvider** ,React Query 中的所有 hook 运行时需要这个全局的上下文状态。

import { QueryClient, QueryClientProvider } from 'react-query'
import Todos from './Todos'const queryClient = new QueryClient()function App() {return (<QueryClientProvider client={queryClient}><Todos /></QueryClientProvider>)
}export default App

3. 简单的 GET 请求

使用React Query 的主要获取数据的 Hook useQueryuseQuery 是最基础的数据获取 Hook。 可以获取、缓存、同步、自动更新数据。

下面的示例中,它会请求并显示所有的 todos

import React from 'react'
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import axios from 'axios'const queryClient = new QueryClient()function Todos() {const fetchTodos = async () => {const { data } = await axios.get('/api/todos')return data}**const { isLoading, error, data } = useQuery('todos', fetchTodos)**if (isLoading) return 'Loading...'if (error) return 'An error has occurred: ' + error.messagereturn (<ul>{data.map(todo => (<li key={todo.id}>{todo.title}</li>))}</ul>)
}function App() {return (<QueryClientProvider client={queryClient}><Todos /></QueryClientProvider>)
}export default App

useQuery 参数详细说明

useQuery(queryKey, queryFn, options)
参数详细参数可选类型作用说明
queryKey**StringArray**
queryFnFunction这个函数会返回一个 Promise,用于获取数据。如果你的 query key 是一个数组,每个数组的元素都会作为单独的参数传递给这个函数。
optionscacheTimeNumber不活动的数据在被自动垃圾回收清除之前的毫秒数。默认是 5 分钟。
staleTimeNumber数据在获取后变得过时之前的毫秒数。默认情况下,数据在获取后就会立即变过时。
retryNumber如果查询失败,将尝试重新查询的次数。默认是 3 次。
retryDelayNumber重试查询之间的毫秒数。默认为 1000 毫秒。

进阶用法

1. 如何实现分页查询

React Query提供了**usePaginatedQuery**方便地用于实现分页查询。

import React from 'react'
import { usePaginatedQuery } from 'react-query'
import axios from 'axios'const fetchProjects = async (key, page = 0) => {const res = await axios.get(`/api/projects?page=${page}`)return res.data
}function Projects() {const [page, setPage] = React.useState(0)const {isLoading,isError,error,resolvedData,latestData,isFetching,} = usePaginatedQuery(['projects', page], fetchProjects)if (isLoading) return 'Loading...'if (isError) return `An error has occurred: ${error.message}`return (<div>{resolvedData.projects.map(project => (<p key={project.id}>{project.name}</p>))}<div><buttononClick={() => setPage(old => Math.max(old - 1, 0))}disabled={page === 0}>Previous Page</button>{' '}<buttononClick={() => { if (!latestData || !latestData.hasMore) {return} setPage(old => old + 1)}}disabled={!latestData || !latestData.hasMore}>Next Page</button></div>{isFetching ? ' Loading more...' : null}</div>)
}export default Projects

需要注意的点

**resolvedData是上次成功获取的数据,而 latestData则是最新尝试过获取的数据,所以当用户点击“下一页”按钮时,新的数据正在加载,但在新的数据被成功加载之前,resolvedData**仍然是上次成功获取的数据。

总结

如果你的项目技术栈使用的是React、并且你的项目需要与后端进行接口交互,那么 React Query 是很好的提效工具。React Query 提供了十多个 Hook 来应对各种复杂的业务场景,分页查询、无限加载、并发请求、接口预加载等等场景都能够完美处理。

更多的业务场景实战,我会在后续的文章中详细介绍,感兴趣的朋友可以关注一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式开发——GD32F4的I2C查询

SCL SDA TXFRAME SMBA I2C0 PB6,PB8 PB7,PB9 PB4 PB5 I2C1 PB10,PF1,PH4 PF0,PH5,PB11,PC12,PB3 PF3,PH3,PB13 PF2,PH6,PB12 I2C2 PA8,PH7 PH8,PC9,PB4 PA10,PH10 PA9,PH9

删除数据后, redis 内存占用还是很高怎么办?

现象&#xff1a; reids 做了数据删除&#xff0c;数据量不大&#xff0c;使用 top 命令看&#xff0c;发现还是占用大量内存 原因&#xff1a; 1.redis 底层内存根据内存分配器分配&#xff0c;不会立刻释放 2.redis 释放的内存空间不是连续的&#xff0c;存在碎片 内存碎…

编译错误:C4056E type of input file ‘xxx‘ unknown

最近在Proteus上面进行仿真&#xff0c;将编译后的hex文件导入到电路图中&#xff0c;进行程序运行的时候&#xff0c;Proteus报了这么一个错误&#xff1a;Error: C4065E: type of input file Pian unknown 我上网一搜&#xff0c;好像与文件名称中存在空格有关&#xff0c;导…

百度飞桨文心生态成果最新披露:开发者达1070万 模型数超86万

12月28日&#xff0c;由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023在北京召开。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰现场公布了飞桨文心五载十届最新生态成果&#xff0c;文心一言最新用户规模破1亿&#xff0c;截…

uniapp 新建组件

1. 新建文件夹 components 文件夹名称必须是 components &#xff0c;否则组件无法自动导入 2. 新建组件 3. 编辑组件 components/logo/logo.vue <template><img src"https://img.alicdn.com/imgextra/i1/O1CN01EI93PS1xWbnJ87dXX_!!6000000006451-2-tps-150-15…

BP神经网络详细原理,BP神经网络训练界面详解,基于BP神经网络的公司财务风险分类

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于BP神经网络的公司财务风险分类 完整代码下载链接:基于BP神经网络的公司财务风险分类(代码…

mac 安装pyaudio

直接安装pyaudio时报错 ERROR: Could not build wheels for PyAudio, which is required to install pyproject.toml-based projects需要先安装portaudio&#xff0c;打开终端执行&#xff1a; brew install portaudio再安装pyaudio成功 pip3 install pyaudioportaudio是一个…

Java中的锁(二)

锁从不同的角度有不同的分类&#xff0c;从线程是否需要锁住同步资源角度来分&#xff0c;可以分为&#xff1a;悲观锁和乐观锁。 一、悲观锁、乐观锁的定义 悲观锁就是我们常说到的锁。对于悲观锁来说&#xff0c;他总是认为每次访问共享资源时会发生冲突&#xff08;认为别的…

CNN实现对手写字体的迭代

导入库 import torchvision import torch from torchvision.transforms import ToTensor from torch import nn import matplotlib.pyplot as plt 导入手写字体数据 train_dstorchvision.datasets.MNIST(data/,trainTrue,transformToTensor(),downloadTrue) test_dstorchvis…

Windows实现MySQL5.7主从复制(详细版)

使用免安装版本&#xff08;官网下载地址&#xff09; 在Windows上安装两种MySQL服务并同时开启服务 1.下载配置 打开解压文件所在位置&#xff0c;就新建一个配置文件my.ini。 2.主库安装 主库的my.ini配置文件如下&#xff1a; [mysqld] #设置主库端口&#xff0c;注意须是…

uniapp开发移动端遇到的问题记录

1. 键盘弹起时页面整体上移问题 很常见但我解决过程中遇到了很多问题 我的键盘没有遮盖到输入框&#xff0c;但手机键盘弹起后&#xff0c;form部分会整体上移一点&#xff0c;并且底部的操作也会弹到键盘上方 网上写得很复杂&#xff0c;什么动态赋值高度balabala。看到有一…

英文vos安装,vos3000 web3.0

英文vos安装&#xff0c;vos3000英文软件工具安装&#xff0c;Web V3.0是一个安全且强大的批发 VOIP 计费解决方案&#xff0c;具有新的 Web 界面和无与伦比的令人惊叹的新功能。现在使用移动应用程序或网络浏览器控制您的 VOS3000 VOIP 计费服务器 yumsed -i "s|enabled…

使用pytorch搭建ResNeXt并基于迁移学习训练

冻结除最后全连接层以外的所有权重&#xff0c;只去单独训练它最后一层的的权重&#xff0c;这个方法&#xff0c;冻结了所有网络的权重。 for param in net.parameters():param.requires_grad False

测试熟悉新技术

一&#xff1a;redis 1.定义 简单来说 redis 就是key-value 类型的数据库&#xff0c;不过与传统数据库不同的是 redis 的数据是存在内存中的&#xff0c;所以读写速度非常快&#xff0c;因此 redis 被广泛应用于缓存方向,它有5种基本数据类型&#xff1a; String&#xff08;…

C语言之指针和函数

目录 作为函数参数的指针 二值互换 scanf函数和指针 指针的类型 空指针 标量型 在C语言程序中&#xff0c;指针的一个重要作用就是作为函数参数使用&#xff0c;下面我们就来学习作为函数参数的指针的相关内容。 作为函数参数的指针 假如我有一个神奇的能力&#xff0c;能…

win32 WM_MENUSELECT消息学习

之前写了一些win32的程序&#xff0c;处理菜单单击都是处理WM_COMMAND消息&#xff0c;通过 LOWORD(wParam) 获取菜单ID&#xff0c;判断单击的是哪个菜单项&#xff1b; 还有一些其他菜单消息&#xff1b; 当在菜单项中移动光标或鼠标&#xff0c;程序会收到许多WM_MENUSELEC…

stm32f103系统滴答定时器

简介 SysTick定时器, 是一个24位的定时器, 只能向下计数(n->0). 从RELOAD寄存器中自动重装载定时初值. 24位可以粗略约等于16M个数字. 寄存器 库函数配置系统定时器中断 选择8分频还是系统时钟源. 系统滴答次数, 也就是重装载值, 每次结束都会产生一个中断. 使用系统时钟…

12.28

1 有道云笔记 2 #include <iostream>using namespace std;class person { private:int *age;string &name; public:person(int age,string name):age(new int(age)),name(name){}~person(){delete age;}person(const person &other):age(new int(*(other.age)…

软件测试/测试开发丨学习笔记之Python运算符

运算符的作用 Python基础语法的内容通常表示不同数据或变量之间的关系 算数运算符 运算符描述加-减*乘/除%取模**幂//取整除 取模与取余区别 概念上&#xff1a;取模是计算机术语&#xff0c;取余属于数学概念&#xff1b; 结果上&#xff1a;当同号的两个数相除&#xff…

程序员如何高效学习技术?

我们相信努力学习一定会有收获&#xff0c;但是方法不当&#xff0c;既让人身心疲惫&#xff0c;也没有切实的回报。 不少朋友每天都阅读技术文章&#xff0c;但是第二天就忘干净了。工作中领导和同事都认可你的沟通和技术能力&#xff0c;但是跳槽面试却屡屡碰壁。面试官问技术…