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

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

我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...React Query 的另一个好处是它的缓存机制。对于每个查询，我们需要提供相应的查询键，用于将数据存储在缓存中。 这也有助于请求的去重。...如果我们从多个地方调用相同的查询，它将确保 API 请求仅发生一次。...我们还添加了 ReactQueryDevtools，它是一个小部件，允许我们检查所有查询。它仅在开发中工作，对于调试非常有用。...# 给功能逻辑添加 API 层 每个功能的 API 层将在 api 文件夹中定义。API 请求可以是查询或更新。

2K20

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

return } 这是一个组件拉取服务端数据的简单例子，在组件中，我们简单拉取了一个接口的数据，并监听接口的状态，根据状态来更新不同的UI。...一些状态管理库的弊端 许多状态管理库，比如redux，可以很流畅的管理页面的状态，也有处理副作用的能力，但往往不能很好的处理服务端的状态，因为处理服务端的状态，通常还包括： 缓存 将对同一数据的多个请求消除为一个请求...在后台更新“过期”数据 知道数据何时“过期” 尽快反映数据更新 性能优化，如分页和延迟加载数据 管理内存和服务器状态的垃圾收集 使用结构共享记忆查询结果 直到React-Query的出现，上面的问题都变得迎刃而解...key值，也可以在数组中，写入多项如：['repoData', '1'],这样React-Query在使用的时候会自动把它拼接为/repoData/1，这个在缓存用户访问过的页面时，非常有用。...最后 感谢你能看到这里，本文简单介绍了React-Query对服务端数据进行增删改查的功能实现，以及React-Query的一些其他能力，希望对你有用，React-Query的使用场景没有其他状态管理库那么广泛

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

    大厂都在用 @tanstackreact-query 到底有多好用！

    前言 最近参与新的项目了，发现项目居然使用了 @tanstack/react-query，以前之后简单介绍过，今天再来详细上手使用下！...更多精彩文章欢迎关注我的公众号 正文 @tanstack/react-query 是 TanStack 生态的一部分，专为 React、Vue 等框架设计，用于管理服务器状态和异步数据。...突变与更新（useMutation） useMutation 用于数据更新，如 POST 请求，支持乐观更新和回滚。...并行查询时只需要写多个 useQuery 即可， const userQuery = useQuery({ queryKey: ["user", userId], queryFn: () =>...感兴趣的话感觉用它来优化你的项目吧！ 今天的分享就这些了，感谢大家的阅读！如果文章中存在错误的地方欢迎指正！ 往期精彩推荐 有了它，我放弃了 try-finally 代码块！

    70510

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

    ，我们不仅要请求数据，还要处理相应的loading,error这些中间态，这类通用的中间状态处理逻辑可能在不同组件中重复写很多次。...另外，现在的前端项目特别是单页面应用，会使用Flux、Redux、Mobox等状态管理库，会把组件间共享的数据都存放在状态管理库中，这些可以分为两类，一类是用户交互的中间状态,比如isLoading,isClose...解决了什么问题 服务端状态有以下特点： 存储在远端，本地无法直接控制 需要异步 API 来查询和更新 可能在不知情的情况下，被另一个请求方更改了数据，导致数据不同步 现有的状态管理库（如 Mobx、Redux...而 React Query 就是为了解决服务端状态带来的上述问题而出现的，除此之外它还带来了以下特性： 更方便地控制缓存 把对于相同数据的多个请求简化成一个 在后台更新过期数据 知道数据什么时候会「过期...」 对于数据的变化尽可能快得做出响应 分页查询和懒加载等请求性能优化 管理服务器状态的内存和垃圾回收 通过结构共享（structural sharing）来缓存查询结果 请求中间态处理 function

    3.1K30

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

    UseQuery 是一个 React hook，它需要三个参数： 1.查询关键字 2.查询函数 3.配置项 让我们从第一个参数开始。查询关键字是 React Query 用于识别你的查询的关键字。...为了这样做，你必须使用 useQueryClient 钩子来检索 queryClient，并使用 invalidateQueries 方法，你可以使 React Query 缓存无效，同时使指定的查询或多个查询失效...该 hook 仅返回一个布尔值，表示应用程序中是否存在一个或多个获取请求。因此，你可以根据这些数据决定是否显示加载器。Easy peasy！...在你的应用程序中使用该组件的好处在于，它允许在运行时查看 ReactQuery 中发生的情况。你可以检查状态中保存的数据，不同的查询有多少应用程序部分使用等等。...状态中，因为设置查询数据的键与 useUser 相同。

    6.6K42

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

    React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。...内联写法 集中管理 自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。...service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。 要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。...但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。

    2.7K30

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

    React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。...内联写法 集中管理 自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。...service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。 要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。...但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。

    4.5K10

    react-query从拒绝到拥抱

    为了进一步增强应用和体验，比如网络错误自动重试，为了防止用户看到的是旧的数据，你需要增加窗口焦点时重新自动获取数据等，可以看出如此发展下去，组件需要管理的状态越来越多，你也会越来越力不从心，状态的增多，...导致你的组件更容易出bug，很大可能会造成你忘记去修改或重置它们的状态，因为这些状态分布零散，同时这也会造成将来的代码是多么难以维护和扩展，这会是一场噩梦。...react-query 三大核心概念 Queries useQuery ：发起单个请求 useQueries：发起多个请求 useInfiniteQuery:用于无限加载的列表，非常强大，让构建无限加载组件变得简单...下面来看下Queries的配置对象 Queries options 配置对象就是第3个参数，它是一个对象，这个配置对象在useQueries，useInfiniteQuery中也相同,这个对象有数十个参数可供配置...总结 如果你是用hooks开发组件的话，非常建议你使用，它会让你的开发之旅更自在。这个库非常强大，不可能一一解释，你可以根据自己的需要，自己去琢磨。

    3.2K31

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

    去年我接手一个项目，第一次Code Review时，我看到这样的代码：一个简单的数据列表组件，却有5个useState、3个useEffect嵌套依赖，还附赠一个isMounted标志位来防止内存泄漏。...React中那些被混淆的「状态」 一个容易被忽视的事实是：React中的状态从来不是平等的。它们属于两个完全不同的世界。 客户端状态（Client State）：你100%拥有和控制它。...更关键的是： ✅ 自动去重：同时多个组件请求同一个categoryId的数据？只发一次请求 ✅ 自动缓存：用户切换分类再切回来？...看起来代码更多了，但这段代码处理了所有边界情况： 用户看不到任何加载中的状态，体验极其流畅 网络请求失败？列表自动恢复原样，用户知道失败了 多个异步操作？...超过这个时间后，标记为「陈旧」，下次有组件请求时会在后台重新获取。 gcTime：内存中的缓存何时被彻底清理掉。如果用户3分钟都没有用到某个查询，那么在gcTime过期后，这份缓存就会被垃圾回收。

    23610

    为什么我不再用Redux了

    Redux 是 React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据，并解决了在组件树中 prop-drilling 的问题。...我们必须考虑如何在全局范围内以最佳方式存储这些数据，以便它们能对我们的所有组件都可用，同时保持数据缓存以减少网络延迟。...React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 和几个 hooks，用于管理查询（获取数据）和突变（更改数据）。...下面是使用 React Query 实现的相同示例： import React from "react"; import { useQuery } from "react-query"; import...React Query 和 SWR 大约是在同一时间开始开发的，并且以积极的方式相互影响。在 react-query 文档中也对这两个库进行了彻底的比较。

    3.4K20

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

    在这篇博文中，我们将探讨React中的多个状态管理示例，从基本的useState()到更高级的库，比如Redux，同时强调使用Context API等简单解决方案的好处。让我们开始吧！...使用useState()进行基本状态管理我们从使用useState()钩子进行最简单形式的状态管理开始。我们将探讨如何在功能组件内初始化和更新状态。...属性钻取和Context API接下来，我们深入探讨“属性钻取”（prop drilling）的挑战，其中状态需要通过多个组件传递。为了解决这个问题，我们引入了Context API。...createContext返回的MyContext对象包括Provider和Consumer组件。在Parent组件中，我们定义了要共享的值，这里是“Hello from Parent”。...在父组件中，我们使用react-redux的Provider组件将Child组件包装起来，并将Redux store作为属性传递。

    2.8K31

    Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块

    这样，我们接下来就可以先写创建项目和编辑项目的模态框，我们只需要将被编辑的项目数据传递给模态框就可以了，对于创建项目，我们给一个空白的即可 这里我们的抽拉效果，采用的是 antd 中的 Drawer 组件实现的...，对这个组件不熟悉的可以看看：Drawer 从描述上来看，它会覆盖住父窗体的内容，正符合我们的想法，我们只需要将 Form 表单丢进这个 Drawer 组件中即可， <Drawer forceRender...这其实利用的是 useMutation 这个 react-query 中的原生 hook // 示例 return useMutation( (params: Partial)...Menu.Item onClick={() => confirmDeleteProject(project.id)} key={'delete'}> 再这里我们采用了 antd 组件中的 Modal 组件下的... 来获取 Rate 中的所有 props 类型，也就是接收参数的类型，我们将我们的 Pin 组件的 props 参数用上这个类型就可以了 这里采用了一个 !!

    1.5K30

    Redux你是个好人，只是我们不合适

    如果没使用「状态管理」方案，常见方式是请求数据后保存在组件state中，如： function App() { const [data, updateData] = useState(null);...，会将请求的数据序列化后保存在「全局状态」中。...用户交互的中间状态 交互的中间状态，比如isLoading、isOpen，同样保存在组件内部。 当是可复用组件、或状态需要跨组件层级传递，通常使用Context API。...对于缓存，常见的需求是： 数据状态，加载中？加载完成？发生错误？ 缓存失效后的更新 复用缓存数据 在React技术栈，SWR、react-query都是优秀的解决方案。这里以SWR举例： ?...复用缓存数据：SWR会以请求url为key，请求对应promise为value缓存数据，达到多个重复请求复用缓存的目的。

    1.2K20

    Redux你是个好人，只是我们不合适

    如果没使用「状态管理」方案，常见方式是请求数据后保存在组件state中，如： function App() { const [data, updateData] = useState(null);...，会将请求的数据序列化后保存在「全局状态」中。...用户交互的中间状态 交互的中间状态，比如isLoading、isOpen，同样保存在组件内部。 当可复用组件、或状态需要跨组件层级传递，通常使用Context API。...对于缓存，常见的需求是： 数据状态，加载中？加载完成？发生错误？ 缓存失效后的更新 复用缓存数据 在React技术栈，SWR、react-query都是优秀的解决方案。...复用缓存数据：SWR会以请求url为key，请求对应promise为value缓存数据，达到多个重复请求复用缓存的目的。

    75610

    Lightning Indexer 算子源码解读与性能优化实践

    算子背景Lightning Indexer（闪电索引器）是长上下文 DeepSeek Sparse Attention (DSA) 架构中的关键组件，负责在超长序列中以极低的计算开销快速筛选出对当前查询...Lightning Indexer 对所有历史 token 计算查询与键的相关性得分，然后通过 Top-K 选择模块从所有键值对 中挑选出分数最高的 K 个候选。...核筛选慢（或反之）流水线停滞，单一核闲置等待算子调用与数据复用不足量化、计算、筛选分拆为多个算子，中间数据反复读写额外调度开销 + 内存 IO 延迟叠加内存访存开销需要遍历超长序列的所有token以计算相关性分数...这样大幅降低了HBM访存频率，提高了数据局部性和重用率。例如，如果每次处理B个token，则每个token的键向量只需要从内存加载一次，之后在Cube核计算多个查询时可重复使用。...将原本分开的多个操作尽量合并到单个算子内核中执行，减少算子调用开销和中间数据存取。

    33110

    全球超2万名开发者调研：Python 3渗透率至84％

    报告的目的是寻找Python领域的新趋势，帮助开发者深入了解2018年Python开发者的现状。 该报告共统计了来自150多个不同国家和地区的超过两万名开发人员的Python使用情况。...2018年受访的开发者中，运维人员的数量明显增加（与2017年相比增加了8个百分点）。在使用Python作为次要语言的开发者中，运维开发已经超过了Web开发。...大约三分之一的受访者不使用任何云解决方案。 如何在云平台运行代码？ （多选） ? 如何在云平台上进行开发？ ? 开发工具 操作系统 近三分之二的受访者选择Linux作为他们的开发环境操作系统。...在上边“隔离Python开发环境”部分中，我们发现大约五分之一的Python用户不使用Python隔离。 数据库 大多数人使用免费或开源数据库，如PostgreSQL，MySQL或SQLite。...工作角色 73%的受访用户是开发者或者程序员。12%的其他选项中，填写最多的是数据科学家、运维、研究者和教师。 ? 涉及项目数量 17%的Python用户只做一个项目，42%的用户同时做多个项目。

    1.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券