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

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

然后是配置项，这些很简单啦 :) 有许多可能的选项用于以不同的方式运行查询（重试次数、何时刷新数据、如何缓存数据等等..）。...为了更好地在代码中理解突变是什么，让我们从一个代码片段开始 import { useMutation } from '@tanstack/react-query'; const postTodo =...为了这样做，你必须使用 useQueryClient 钩子来检索 queryClient，并使用 invalidateQueries 方法，你可以使 React Query 缓存无效，同时使指定的查询或多个查询失效..., { variant: 'error' }); } }); return signUpMutation; } 通过创建这样的 mutation，你可以非常简单和清晰地构建一个注册操作...为了做到这一点，在这种情况下，最好的方法是创建一个称为 useUser 的新 hook，它是用户数据的所有者。

6.6K42

写在 2021: 值得关注学习的前端框架和工具库

这个方法，可以把整个GraphQL Server以中间件的形式挂载到一个Node应用上（我就是使用这种方式来同时提供REST和GraphQL两套API的，但需要注意某些中间件的配置需要ignore掉挂载的路径...在TS中这个工具的主要能力就是生成TS的类型定义，同时它的插件体系还提供了更多的额外能力，如Apollo-Client的插件，让你可以直接使用封装好的的useXXXQuery等，前端连查询语句都不用写了...一体化框架 一体化框架指的是， 你的前后端项目放在同一个repo里（后端是Node），同时前端直接调用在后端定义的方法，由框架在编译时去自动的把前端对后端的方法调用转换成HTTP请求。...，Apollo的useQuery接收的是GraphQL Document，BlitzJS中的则接收的是后端方法，其中会直接db.entity.create()这样去写数据库）。...点赞并分享给你的朋友是最好的支持~ 参考资料 [1] 学完Vue还有必要学习React和Node吗？

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

    写在2021: 值得关注学习的前端框架和工具库

    在TS中这个工具的主要能力就是生成TS的类型定义，同时它的插件体系还提供了更多的额外能力，如Apollo-Client的插件，让你可以直接使用封装好的的useXXXQuery等，前端连查询语句都不用写了...一体化框架 一体化框架指的是， 你的前后端项目放在同一个repo里（后端是Node），同时前端直接调用在后端定义的方法，由框架在编译时去自动的把前端对后端的方法调用转换成HTTP请求。...的编写，不需要定义Resolver、ObjectType这些东西，因为BlitzJS内部用useQuery和useMutation抹掉了中间的调用过程（和Apollo的hooks类似但不完全相同，Apollo...的useQuery接收的是GraphQL Document，BlitzJS中的则接收的是后端方法，其中会直接db.entity.create()这样去写数据库）。...构建、打tag、发包、运行测试等等。

    3.9K10

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

    接下来我们将来处理看板部分的展示 知识点抢先看 封装 KanbanColumn 来布局页面 编写大量的 custom hook 来处理看板数据 对 useQuery 有进一步的了解 利用 filter...util 文件夹内，这个文件夹中的 hook 都是一些复用性高的，和页面关系不大的 hook 1. useKanbans 这里获取数据的方法和前面获取项目数据的方法一样，我们采用 useQuery 来进行缓存看板数据...，来返回类型对应的 icon ，这里我们只需要接收一个 taskid 作为参数，用来判断这个任务是什么类型 // 通过type渲染图片 const TaskTypeIcon = ({ id }: { id...const { mutateAsync: deleteTask } = useDeleteTask(useTasksQueryKey()) // 点击取消时，调用close同时清空表单 在这里我们暴露出了很多关于任务增删改查的方法...了解了 useQuery 的用法 对 modal 组件有了更多的了解 了解了 react-query 能够优化请求次数

    94140

    Hooks + TS 搭建一个任务管理系统（四）-- 搜索功能实现

    同时我们需要对传入的 value 进行类型转化，保证它是 number 类型 这样我们的 IdSelect 就封装好了，它相对于 Select 有更加严格的类型要求，以确保我们传递的参数类型不会出错 接着我们将这个...id （param.personId），同时在输入框被选择时触发的事件，用来操控我们的页面 url 变化 二、将输入框内容映射到 url 上 在上一小节我们最后谈到了 url 的变化，确实如此，当我们在输入框中输入内容时...方法给子组件 在子组件中使用这个方法来控制 param 的变化...hook ，它会在 param 变化时 ，通过 useQuery 不断的请求数据，这也是我们返回的数据中能够有 isLoading、error 这些的原因 在这里提一下 useQuery ，它是 reacy-query...来控制它值的变化，也就这一点不一样的地方 简单说一说这里的泛型吧，这里我们采用了一个泛型 V ，第一个 是用来做泛型声明的，它的类型由我们传入的 value 来指定，value 是什么就是什么

    92020

    React 设计模式 0x6：数据获取

    学习如何轻松构建可伸缩的 React 应用程序：数据获取 # React 中服务端数据获取的方式 在大多数 React 应用程序中，应用程序需要来自 API 或服务器的数据才能正常运行。...有几种方法可以将此数据发送/获取到 API 或服务器，可以使用内置的 API 或外部 npm 包来实现。 # fetch 这是 JavaScript 和 React 应用程序中常用的 API。...，也是用现有数据来满足这些查询的运行时。...GraphQL 提供了 API 中数据的完整且易于理解的描述，使客户端能够精确地请求所需的数据，避免了不必要的数据传输，使得 API 能够随着时间的推移更容易地发展，并提供了强大的开发者工具。...通过使用 React Query，开发者可以快速地处理数据获取和管理，同时保持 React 应用程序的高性能和可伸缩性。

    2.2K20

    在React中使用Generator函数处理多并发请求同步处理有哪些优缺点？

    与React状态管理兼容Generator的执行结果可以自然地与React的useState或状态管理库（如Redux）结合，将异步请求的结果同步到组件状态：const [data, setData]...与React Hooks的协同问题React Hooks（如useEffect、useCallback）依赖严格的调用顺序和依赖项数组。...冗余的代码模板对于简单的并发请求场景（如“同时请求A、B、C，等待全部完成”），使用Generator需要定义函数、执行器等，代码量比直接使用Promise.all+async/await更多：// 简单场景下...适用场景与替代方案适合使用Generator的场景：undefined多阶段、有条件依赖的并发请求流程（如“先并发请求A和B，根据结果决定是否请求C，再合并所有结果”），且需要清晰的流程可视化。...复杂数据依赖：使用React Query的useQueries（支持依赖请求）或useQuery的enabled参数控制执行时机。

    16710

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

    它允许您使用类似本地函数调用的方式来调用远程函数，同时自动处理序列化和反序列化、错误处理和通信协议等底层细节。...你如果同时调用了多次 greeting 函数，如 pages/index.tsx const result1 = trpc.greeting.useQuery({ name: 'kuizuo1' })...这是 tRPC 的一个特性：请求批处理，将同时发出的请求（调用）可以自动组合成一个请求。...此时请求变为 post 请求，并且携带的参数也以 body 形式传递。 通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。...结语​ 如果你是用 Next，Nuxt 等这样的全栈框架，并且你的后端服务使用 Typescript 编写，不妨试试 trpc，你会惊喜地发现，它颠覆了传统的 API 交互，使你的 typescript

    4.2K51

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

    在这篇博文中，我们将探讨React中的多个状态管理示例，从基本的useState()到更高级的库，比如Redux，同时强调使用Context API等简单解决方案的好处。让我们开始吧！...最后，我们呈现当前的计数值以及用于增加和减少计数的按钮。通过这个例子，我们可以轻松地在Counter组件内管理和更新count变量的状态。...每当状态发生变化时，React都会处理组件的重新渲染并相应地更新显示的计数。这个基本例子演示了在React应用程序中使用useState()钩子管理状态的简单性和强大性。...像Context API这样的简单解决方案通常足以满足较小项目的要求，并避免不必要的复杂性。通过理解不同状态管理方法的优势和权衡，您可以在选择正确解决方案时做出明智的决策。...记住，当更简单的替代方案可以有效满足您的需求时，并不总是必要引入庞大的框架。拥抱React状态管理生态系统的灵活性，并选择最符合项目大小和复杂性的方法。

    2.8K31

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

    它允许您使用类似本地函数调用的方式来调用远程函数，同时自动处理序列化和反序列化、错误处理和通信协议等底层细节。...'world'}`, } }),})调用 trpc.greeting.useQuery({ name: 'kuizuo' }) 发送的请求的 query 参数则变为图片不仅于此，你如果同时调用了多次...图片这是 tRPC 的一个特性：请求批处理，将同时发出的请求（调用）可以自动组合成一个请求。...:::此时请求变为 post 请求，并且携带的参数也以 body 形式传递。图片图片通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。...结语如果你是用 Next，Nuxt 等这样的全栈框架，并且你的后端服务使用 Typescript 编写，不妨试试 trpc，你会惊喜地发现，它颠覆了传统的 API 交互，使你的 typescript 全栈应用程序的开发变得更加高效和流畅

    2.7K20

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

    如果我要进行许多 HTTP 调用，我不想为每个调用重复和维护大约 20 行代码。内联调用让你的代码变得很丑。...，抛出错误 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏 声明一个空的依赖项数组，以便 useEffect 只运行一次 这只是一个简单的示例，它忽略了许多其他相关问题...使用这种方法，我们创建了一个名为 services 的文件夹，并且把进行 HTTP 调用的函数都放进去。...如果 userService 文件夹中充满了进行 HTTP 调用的函数，那么我可以很容易地确保它们始终如一地这样做。此外，如果调用被复用，则很容易从这个集中位置调用它们。 然而，我们还可以做得更好。...，但我发现这个基本的使用方法很有用。

    4.5K10

    为什么我不再用Redux了

    我们必须考虑如何在全局范围内以最佳方式存储这些数据，以便它们能对我们的所有组件都可用，同时保持数据缓存以减少网络延迟。...我们获得了分离关注点的所有好处，同时避开了构建 SPA 的大部分缺点。 后端状态的更简单方法 我认为有两个库比使用 Redux（或类似的状态管理库）存储后端状态要好用很多。...我发现自己更容易将注意力集中在前端应用程序的 UI/UX 上，不会再时刻操心整个后端状态了。 要对比这个库和 Redux 的话，我们来看这两种方法的一个代码示例。...只要函数是异步的，实现就无关紧要——你可以轻松地使用 Fetch API 代替 Axios。 要更改后端状态时，React Query 提供了 useMutation hook。...或者更好的方法是，使用 React 的内置状态作为你的简单前端状态，这样做肯定没问题的。

    3.4K20

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

    很多开发者会发现，当他们开始从Redux迁移时，会惊讶地发现——整个Redux的样板代码、action、reducer、中间件、selectors……其实可以被三个不同的、更专业的工具完全替代，而且效果更好...真相二：状态应该按"场景"分类而不是"位置" 让我们把应用的"状态"重新分类。关键不是问"这个状态放在哪里"，而是问"这个状态是什么性质的"。性质不同，处理方案完全不同。 1....请求去重 - 两个组件同时请求同一个商品列表，能只发一次请求吗？ 缓存策略 - 用户从详情页返回列表页，数据是否需要重新加载？ ⚡ 并行加载 - 列表加载中能同时预加载详情页数据吗？...看看最新的Next.js或Fresh app模板，都没有预设Redux。 Zustand - 由主流开源社区维护(pmndrs)，活跃度高。作者同时也是Jotai的维护者，说明这是个可信赖的团队。...应该问"我有什么类型的状态需要管理，每种类型最合适的工具是什么"。

    31410

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

    React中那些被混淆的「状态」 一个容易被忽视的事实是：React中的状态从来不是平等的。它们属于两个完全不同的世界。 客户端状态（Client State）：你100%拥有和控制它。...从某种角度说，这验证了我们的方法从一开始就不对劲。...优雅降级：失败时自动重试，重试失败后能优雅地显示错误 乐观更新：修改数据时立即在UI上反馈，等服务端确认后再验证 这些功能完全超出了useState+useEffect的能力范围。...更关键的是： ✅ 自动去重：同时多个组件请求同一个categoryId的数据？只发一次请求 ✅ 自动缓存：用户切换分类再切回来？...写完第一个hook的时候，你会感受到一种"原来可以这样写"的解脱感。 那个时刻，就是你真正理解了服务端状态和客户端状态的区别。 扩展阅读 TanStack Query官方文档

    23810

    聊聊springboot自动装配出现的TypeNotPresentExceptionProxy异常排查

    true 我的问题是 在运行环境为jdk8的springboot项目引入上述的starter，是否会有问题？...我们运行一下，发现会出现 然后我们不改任何一行代码，把JDK调成11或者以上版本，再运行 项目成功运行。那我们的修复的第一直觉是不是把JDK8的版本提高。...我们团队的小伙伴第一时间也是这么干的，他去和业务团队的技术经理沟通，看他们能不能把JDK8调整成JDK11，然后得到了业务团队技术经理的高度否定，因为他们大部分业务都跑在jdk8，冒然升级成jdk11，...于是点开@ConditionalOnClass，他的注解上有如下提示 他的大意是，可以在@Configuration classes上安全地指定value（），因为在加载类之前会使用ASM解析注释元数据...当放置在@Bean方法上时，需要格外小心，请考虑在单独的Configuration类中隔离条件，特别是当方法的返回类型与条件的目标匹配时。

    56430

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

    如果我要进行许多 HTTP 调用，我不想为每个调用重复和维护大约 20 行代码。内联调用让你的代码变得很丑。...，抛出错误 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏 声明一个空的依赖项数组，以便 useEffect 只运行一次 这只是一个简单的示例，它忽略了许多其他相关问题...使用这种方法，我们创建了一个名为 services 的文件夹，并且把进行 HTTP 调用的函数都放进去。...如果 userService 文件夹中充满了进行 HTTP 调用的函数，那么我可以很容易地确保它们始终如一地这样做。此外，如果调用被复用，则很容易从这个集中位置调用它们。 然而，我们还可以做得更好。...，但我发现这个基本的使用方法很有用。

    2.7K30

    编写SQL查询的最佳方法

    构建查询的方式和编写查询的方式对向开发人员传达你的意图有很大帮助。当我看到来自多个开发人员的电子邮件上的SQL查询时，我可以看到他们的写作风格有很大的不同。...有些开发人员写得非常整洁，并且正确地缩进了查询，这样就很容易发现关键的细节，例如从哪个表中提取哪些列，以及条件是什么。...如果不是，最好通过一些好的课程来获得一些SQL方面的经验： 1. 《 The Complete SQL Bootcamp》，数据科学家乔希·波蒂拉 2....缺点： 1)混合案例 2)整个查询都写在一行上，一旦表和列的数量增加，就无法读取 3)在添加新条件或没有现有条件的情况下运行时，没有灵活性 编写SQL查询的第二种方法 SELECT e.emp_id,...2)使用适当的缩进可以方便地识别数据源，即表和连接。

    2.6K11

    20180715_ARTS_week03

    其中，因为要检查记录下来的子串中是否和当前的字符有重复，这里用到了 Array.indexOf 方法，这个方法时间复杂度是 O(n)，本来想用 ES6 提供的 Set 类型数据结构的 has 方法来检查...简单介绍了的 GraphQL 是什么，是 FaceBook 推行的一种查询语言。我个人觉得更像一种接口约定 DSL。...简单描述了前端使用 GraphQL 的方式，文中主要介绍的是依赖一个开源库 apollo-client，apollo-client 也能用在 Angular，React，Vue 中。...Rest API Rest 和上面两个来讲，不是一个协议，而更像一种接口风格，把各种东西当成资源，然后围绕资源的状态变化来构建 API 接口，包括调用 API 的 HTTP 方法。...除此之外， Rest 风格和 HTTP 绑的比较紧，依赖 HTTP 状态码以及 HTTP 请求方法 GET/POST/DELETE/PUT，某些情况可能不适用，比如需要更高性能的 RPC 调用时。

    69020

    聊聊springboot自动装配出现的TypeNotPresentExceptionProxy异常排查

    true 我的问题是在运行环境为jdk8的springboot项目引入上述的starter，是否会有问题？...我们运行一下，发现会出现图片然后我们不改任何一行代码，把JDK调成11或者以上版本，再运行图片项目成功运行。那我们的修复的第一直觉是不是把JDK8的版本提高。...我们团队的小伙伴第一时间也是这么干的，他去和业务团队的技术经理沟通，看他们能不能把JDK8调整成JDK11，然后得到了业务团队技术经理的高度否定，因为他们大部分业务都跑在jdk8，冒然升级成jdk11，...@ConditionalOnClass，他的注解上有如下提示图片他的大意是，可以在@Configuration classes上安全地指定value（），因为在加载类之前会使用ASM解析注释元数据。...当放置在@Bean方法上时，需要格外小心，请考虑在单独的Configuration类中隔离条件，特别是当方法的返回类型与条件的目标匹配时。

    60540
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券