文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

React Query 指南，目前火热的状态管理库！

你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...然后是配置项，这些很简单啦 :) 有许多可能的选项用于以不同的方式运行查询（重试次数、何时刷新数据、如何缓存数据等等..）。...这个 hook 的结果有三个重要的属性： data：此属性包含查询函数的结果。请注意数据也可能为 undefined；这是因为在第一次调用时，当请求处于等待状态时，data 尚未呈现。...结果有三个主要的对象： mutate：这是在你的代码中运行突变的操作 isLoading：这个标志表示突变是否正在进行 error：这表示如果请求出现错误，则显示错误 在 React 应用程序中使用突变...它仅在条件process.env.NODE_ENV === 'development'为 true 时才渲染该组件。 如果需要，你可以自定义该组件或强制在生产模式下渲染它。

6.6K42
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    用react-query解决你一半的状态管理问题

    用户交互的中间状态 服务端状态 在陈年的老项目中，通常用Redux、Mobx这样的「全局状态管理方案」无差别对待他们。...事实上，他们有很大区别： 用户交互的中间状态 比如组件的isLoading、isOpen，这类「状态」的特点是： 以「同步」的形式更新 「状态」完全由前端控制 「状态」比较独立（不同的组件拥有各自的isLoading...当「状态」需要跨组件层级传递，通常使用Context API。 再大范围的「状态」会使用Redux这样的「全局状态管理方案」。...我们可以将刚才的例子用React-Query改写： import { useQuery } from 'react-query' function App() { const {data,...不仅如此，React-Query还为我们做了如下工作： 多个组件请求同一个query时只发出一个请求 缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据） 对失效数据垃圾清理 数据的CRUD由

    3.1K10

    使用React-Query解决接口请求的麻烦事

    ”，“useQuery”不会触发，需要使用其返回的“refetch”来触发操作 queryFn：全局定义请求方法，其他地方使用时只需要直接传入请求参数 useQuery useQuery是React-Query...key值，也可以在数组中，写入多项如：['repoData', '1'],这样React-Query在使用的时候会自动把它拼接为/repoData/1，这个在缓存用户访问过的页面时，非常有用。...useQueryClient 通过useQueryClient，我们可以获取到之前注入的容器实例，里面保存着所有我们缓存的信息，以及配置信息，而它本质上其实也是对React.useContext的封装。... 默认情况下，当process.env.NODE ENV === 'production' 时开启 Devtools...，不必担心构建时需要排除他们 浮动模式下开启，会将devtools作为固定的浮动元素安装在开发的应用程序中，并在屏幕一角提供一个切换按钮以显示和隐藏devtools 在devtools中我们可以直观的看到已经缓存下来的数据和整个项目的配置

    2K30

    React 应用架构实战 0x5：集成 API 到应用中

    在之前，了解了如何设置模拟 API，而在本节中，将学习如何通过应用程序消费 API。当我们提到 API 时，指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...它支持在浏览器和服务器端使用，并且具有创建实例、拦截请求和响应、取消请求等功能的 API。 我们首先要创建一个 Axios 实例，其中包含一些我们希望在每个请求上执行的通用操作。...我们可以看到这里有一定量的重复代码： 需要定义相同的data、error和 loading 状态 必须相应地更新不同的状态 数据在我们离开组件时立即被丢弃 如果使用 React Query，我们可以使用...API 层 之前为了在没有 API 功能的情况下构建 UI，我们在页面上使用了测试数据。

    2K20

    React 中请求远程数据的四种方法

    内联写法 集中管理 自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。...，抛出错误 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏 声明一个空的依赖项数组，以便 useEffect 只运行一次 这只是一个简单的示例，它忽略了许多其他相关问题...主要的好处是它可以强制一致地处理 HTTP 调用。其思想是这样的：当相关函数一起处理时，更容易一致地处理它们。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

    4.5K10

    React 中请求远程数据的四种方法

    内联写法 集中管理 自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。...，抛出错误 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏 声明一个空的依赖项数组，以便 useEffect 只运行一次 这只是一个简单的示例，它忽略了许多其他相关问题...主要的好处是它可以强制一致地处理 HTTP 调用。其思想是这样的：当相关函数一起处理时，更容易一致地处理它们。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

    2.7K30

    你的useEffect真的在「同步」吗？为什么React开发者集体掉进了状态管理的陷阱

    // ❌ 错误的思维方式 const [products, setProducts] = useState([]); // 你在欺骗应用：这里放的是真实的数据 // 但实际上这只是上次从API获取到的数据快照...手工处理还是容易出BUG 竞态条件（Race Condition）：用户在网速慢的情况下快速切换筛选条件，旧请求比新请求晚回来，就会看到错误的数据 失败重试机制：网络波动时要不要自动重试？重试多少次？...优雅降级：失败时自动重试，重试失败后能优雅地显示错误 乐观更新：修改数据时立即在UI上反馈，等服务端确认后再验证 这些功能完全超出了useState+useEffect的能力范围。...After: TanStack Query的声明式写法 import { useQuery } from'@tanstack/react-query'; asyncfunction fetchProductsByCategory...应用初始化配置 只需在应用根部做一次配置： import { QueryClient, QueryClientProvider } from'@tanstack/react-query'; const

    23410

    使用React Query做为axios请求库的上层封装

    前言 在项目中，通常都需要跟服务端进行异步的数据交互，基本都是用到axios这个库来做请求，嗯，毕竟拥有80k star,明星项目 接下来，我们来回顾下axios在项目中的使用 以查询用户信息为例，我们会这样封装...，我们不仅将数据一锅炖放在全局状态管理上，写法上也使得项目越来越臃肿了（以至于出现后面rematch、dva方案进行简化），我们有没有想过，服务端的状态就不应该放在全局状态管理上，全局状态管理应该专门处理用户交互的中间状态...等)适用于管理客户端状态，但它们并不关心客户端是如何异步请求远端数据的，所以他们并不适合处理异步的、来自服务端的状态。...ReactQuery 就将我们所有的服务端状态维护在全局，并配合它的缓存策略来执行数据的存储和更新。...举个例子： import React from "react"; import { useQuery, queryCache } from "react-query"; import ".

    3.1K30

    React 应用架构实战 0x6：实现用户认证和全局通知

    目前，当涉及到管理控制台中的用户身份验证时，应用程序仍然依赖于测试数据。在本节中，我们将构建应用程序的身份验证系统，允许用户认证并访问受保护的资源在管理控制台中。...我们还将创建一个 toast 通知系统，以便在发生我们希望通知用户的操作时向他们提供反馈。...除了响应数据之外，还将附加一个 httpOnly cookie，从此时起用于身份验证请求 每当用户进行身份验证时，我们将从响应中的用户对象存储在 react-query 缓存中，并使其对应用程序可用 由于身份验证是基于...cookie 的，带有 httpOnly cookie，因此我们不需要在前端处理身份验证令牌，任何后续请求都将自动包括令牌 调用 /auth/me 接口将处理页面刷新后的用户数据持久化，该接口将获取用户数据并将其存储在相同的...react-query 缓存中 为了实现此系统，我们需要以下内容： 认证功能（登录、注销和访问已认证用户） 保护需要用户进行身份验证的资源 # 功能实现 # 登录 // src/features/auth

    2.3K30

    探索 React 状态管理：从简单到复杂的解决方案

    引言React状态管理在构建动态和交互式的Web应用程序中扮演着至关重要的角色，如果你想在React中工作，了解它是非常重要的，实际上是最重要的事情。...虽然像Redux这样的库是管理应用程序状态的流行选择，但你应该明白何时使用它们，何时不使用它们，而且在满足需求时考虑像Context API这样的简单替代方案也很重要。...当单击增量或减量按钮时，我们使用dispatch函数分派相应的动作。利用React Query进行服务器状态管理对于涉及服务器端状态管理（如数据获取和缓存）的情景，我们引入React Query。...像Context API这样的简单解决方案通常足以满足较小项目的要求，并避免不必要的复杂性。通过理解不同状态管理方法的优势和权衡，您可以在选择正确解决方案时做出明智的决策。...记住，当更简单的替代方案可以有效满足您的需求时，并不总是必要引入庞大的框架。拥抱React状态管理生态系统的灵活性，并选择最符合项目大小和复杂性的方法。

    2.8K31

    Hooks + TS 搭建一个任务管理系统（六）-- 看板页面展示

    ，当 param 变化时，重新发送请求，写入缓存 return useQuery(['kanbans', param], () => client('kanbans', {...其实在我们在遍历添加 kanbanColumns 组件时，只会发起一个请求，即使，我们给每一个 column 都绑定了 useTask 这是因为，我们采用的 react-query 的功劳，在我们采用...useQuery 时，如果在 2s 之内有相同的 queryKey 发出请求的话，就会合并这些请求，只会发出一个 现在我们已经有了每个看板下的 Task 数据了，我们只需要遍历渲染即可，这里我们采用的还是...，不然在服务器请求慢时，造成页面假死过长 和前面一样，我们采用 useMutation 来封装 http 请求，返回一个被处理过的 mutate 请求方式或者 mutateAsync 异步请求方式 在这里我们接收了一个...了解了 useQuery 的用法 对 modal 组件有了更多的了解 了解了 react-query 能够优化请求次数

    94140

    基于CloudBase+React+CodeBudddy完成云上智能睡眠的应用开发实践感悟

    } // ...其他条件分支 } // 添加通用建议 advice += '\n\n通用建议：保持规律作息，卧室温度控制在18-22℃，睡前可尝试冥想练习。'...前端数据缓存策略// 使用React Query管理数据请求import { useQuery } from 'react-query'const fetchSleepData = async (date...深度睡眠时间低于理想值，建议： - 睡前90分钟停止进食 - 保持卧室温度在20℃左右2....本项目开发的主要体会是，云服务与AI编程的协同效应实在太过于强大了！在此基础上小白也能建网站不是一句空话！...当CloudBase处理云端的复杂性，CodeBudddy理解代码的意图时，我们终于可以专注于解决真正的业务问题：如何让我们的每个夜晚都更加安宁。也就是聚焦于需求本身的高级创造过程！

    27600

    Typescript 全栈最值得学习的技术栈 TRPC

    当进行网络请求和 API 调用时，你是否知道本次请求的参数类型以及返回的响应数据类型？...因此我个人所认为的未来 Web 框架形态是要满足的前提就是前后端类型统一，即可以将后端的类型无缝的给前端使用，反之同理。而像 Next、Nuxt 这样的全栈框架便是趋势所向。...此时就可以使用 Migrate，通过命令的方式自动为我们生成当前版本下的 sql 文件，而需要用到的也通过命令的形式运行 sql 文件。...（至于如何创建 Github OAuth Apps，在我之前的文章以及外面诸多文章中都有介绍到，这里不在演示了，附上配置图） 首先在 server/auth.ts 中 导入 server/auth.ts...从 JavaScript 到 TypeScript 的演变，全栈应用的端到端类型安全，TypeScript 目前正在逐渐成为前端开发中不可或缺的一部分，也许未来的某一天当人们说起前端三件套时，不再是 HTML

    4.2K51

    Typescript 全栈最值得学习的技术栈 TRPC

    当进行网络请求和 API 调用时，你是否知道本次请求的参数类型以及返回的响应数据类型？...因此我个人所认为的未来 Web 框架形态是要满足的前提就是前后端类型统一，即可以将后端的类型无缝的给前端使用，反之同理。而像 Next、Nuxt 这样的全栈框架便是趋势所向。...时，将会提示出服务端定义好的 greeting 函数，如下图所示。...（至于如何创建 Github OAuth Apps，在我之前的文章以及外面诸多文章中都有介绍到，这里不在演示了，附上配置图）图片首先在server/auth.ts 中 导入import CredentialsProvider...从 JavaScript 到 TypeScript 的演变，全栈应用的端到端类型安全，TypeScript 目前正在逐渐成为前端开发中不可或缺的一部分，也许未来的某一天当人们说起前端三件套时，不再是 HTML

    2.7K20

    2025年React状态管理的残酷真相

    当所有的"状态"都被塞进Redux store里——API响应数据、URL参数、modal打开状态、表单临时值……这种大一统的思维在2010年代是标准做法。但这也是Redux最臃肿的地方。...乐观更新 - 用户点击收藏时，UI马上变心形，万一失败再改回去？ ️ 竞态条件 - 用户快速搜索时，旧请求的结果不应该覆盖新搜索结果 这所有的复杂性，Redux原生无法优雅地处理。...这不仅更简洁，用户还可以复制链接分享当前的筛选条件。 3....import { useQuery } from'@tanstack/react-query'; import { useQueryState } from'nuqs'; import { useUserStore...下次在团队会议上提出这个观点时，你会发现很多人都有同样的想法——他们只是在等有人先挑战"Redux是标配"这个观念。

    30910

    用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallback

    管窥自定义 Hook 背后的原理 又到了动画时间。我们来看看在组件初次渲染时的情形： 我们在 App 组件中调用了 useCustomHook 钩子。...refetchInterval ：重新获取数据的间隔（以毫秒为单位） 此外，我们还要注意 useEffect 所传入的 deps 数组，包括了三个元素（都是在 Effect 函数中用到的）：converter...useCallback：定海神针 如果你一字一句把上一篇文章[10]看下来，其实可能已经发现了问题的线索： 依赖数组在判断元素是否发生改变时使用了 Object.is 进行比较，因此当 deps 中某一元素为非原始类型时...事实上，在之前的 useCoronaAPI 中，也是因为传入的 deps 存在问题，导致每次渲染后都去执行 Effect 函数去获取数据，陷入了无限循环。那么，到底是哪个依赖出现了问题？...在下一篇教程中，我们将开始进一步推进 COVID-19 数据可视化项目的推进，通过曲线图的方式实现历史数据的展示（包括确诊、死亡和治愈）。数据状态变得越来越复杂，我们又该如何应对呢？敬请期待。

    1.9K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券