这里，推荐使用React-Query管理服务端状态。 ? 另一个可选方案是SWR[1]。...你可以从这里[2]看到他们的区别 初识React-Query React-Query是一个基于hooks的数据请求库。...例子中userData字符串就是这个query独一无二的key。 可以看到，React-Query封装了完整的请求中间状态（isLoading、isError...）。...这样，React-Query就会重新请求userData对应query的数据。 总结 通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。...://swr.vercel.app/ [2] 这里: https://react-query.tanstack.com/comparison
React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 和几个 hooks，用于管理查询（获取数据）和突变（更改数据）。...https://github.com/Buuntu/awesome-react-query SWR SWR 在概念上与 React Query 几乎一致。...React Query 和 SWR 大约是在同一时间开始开发的，并且以积极的方式相互影响。在 react-query 文档中也对这两个库进行了彻底的比较。...Apollo Client SWR 和 React Query 专注于 REST API，但如果你在 GraphQL 上需要类似的东西，就可以考虑 Apollo Client。...本文提到的这些库代表了我们在单页应用程序中管理状态的方式变革，并且是朝着正确方向迈出的一大步。我期待着看到它们能对 React 社区产生怎样的影响。
在中间件之上，又涌现了更全面的解决方案，比如基于Redux-Saga的DVA。 除了这两个纬度，还有其他视角么？ 其实，我们可以从问题的本质出发。 前端，需要哪些状态？...用户交互的中间状态 交互的中间状态，比如isLoading、isOpen，同样保存在组件内部。 当是可复用组件、或状态需要跨组件层级传递，通常使用Context API。...可以看到，不管对于「IO操作缓存的数据」还是「用户交互的中间状态」，常规方案是：一视同仁。 这就又回到了讨论「广度」（使用哪种状态）与「深度」(多深入的使用这种状态管理方案)。...对于缓存，常见的需求是： 数据状态，加载中？加载完成？发生错误？ 缓存失效后的更新 复用缓存数据 在React技术栈，SWR、react-query都是优秀的解决方案。这里以SWR举例： ?...复用缓存数据：SWR会以请求url为key，请求对应promise为value缓存数据，达到多个重复请求复用缓存的目的。
另一位联合作者「Andrew」也来自React核心团队 Dan 合适的出现时机加上大名气，催生Redux相关生态在社区快速发展，成为很多前端团队标配。...在中间件之上，又涌现了更全面的解决方案，比如基于Redux-Saga的DVA。 除了这两个纬度，还有其他视角么？ 其实，我们可以从问题的本质出发。 前端，需要哪些状态？...用户交互的中间状态 交互的中间状态，比如isLoading、isOpen，同样保存在组件内部。 当可复用组件、或状态需要跨组件层级传递，通常使用Context API。...可以看到，不管对于「IO操作缓存的数据」还是「用户交互的中间状态」，常规方案是：一视同仁。 这就又回到了讨论「广度」（使用哪种状态）与「深度」(多深入的使用这种状态管理方案)。...对于缓存，常见的需求是： 数据状态，加载中？加载完成？发生错误？ 缓存失效后的更新 复用缓存数据 在React技术栈，SWR、react-query都是优秀的解决方案。
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了。
在Web开发中，有太多的缩写和首字母缩略语，很难理解上。SSR会影响我的CWV吗？要创建REST API需要多少HTTP方法？SPA使用CSR吗？我真的需要CPR！不要担心，我来帮你。...渲染是生成HTML标记以在浏览器中显示网页的过程。渲染过程的方式，尤其是在哪里发生，可能对用户体验、网站性能和搜索引擎优化（SEO）产生重大影响。...而且一个单独的HTML文件非常容易在Netlify上托管，通过连接Git存储库或通过Netlify Drop上传。这是我之前创建的一个。...SSR 最适合用于包含实时动态数据的页面，例如产品库存水平或价格（如果您正在构建电子商务网站）或个性化页面，例如用户登录到任何网站上的账户。SSR 的缺点是潜在的延迟更长。...请记住，使用 SWR/ISR 时，一些访问您网站的访客可能会看到过时的内容，因为更新的页面会在服务器上重建并缓存。您不会希望在显示准确且最新的数据（例如定价数据）的页面上使用 SWR。
本周精读就来剖析这个库的功能与源码，了解这个 React Hooks 的取数库的 Why How 与 What。 2 概述 首先介绍 swr 的功能。...2.1 为什么用 Hooks 取数 首先回答一个根本问题：为什么用 Hooks 替代 fetch 或数据流取数？...因为 Hooks 可以触达 UI 生命周期，取数本质上是 UI 展示或交互的一个环节。...在列表页中浏览器回退可以自动记忆滚动条位置。 tabs 切换时，被 focus 的 tab 会重新取数。 当然，自动刷新或重新取数也不一定是我们想要的，swr 允许自定义配置。...2.8 Suspense 模式 在 React Suspense 模式下，所有子模块都可以被懒加载，包括代码和请求都可以被等待，只要开启 suspense 属性即可： import { Suspense
Hi，大家好我 ssh，成为一个现代的 React 开发者，不仅需要理解 React 的核心概念，还需要对整个 React 生态系统了如指掌。...TanStack Query TanStack Query是 React 中的一个开源数据 Fetch 库，由Tanner Linsley开发。...TanStack Query 为我们在 React 应用程序中提供了一种标准的获取数据的方式，并帮助我们避免编写复杂的逻辑，减少代码行数，使我们的代码更易维护，使我们的应用程序更快。...SWR Vercel 的SWR是我们列表中的第二个数据 Fetch 库，是 React Query 之外的又一个不错的选择。...SWR 库比 React Query 小得多，更简单，但提供了许多神奇的功能，如可重用的数据 Fetch、Suspense、分页、内置缓存等等。
这两种请求方式的数据流如下图所示： 当然这里仅仅是 hook 带来的好处，下面我们详细讲讲 SWR 可以在我们实际开发的场景中提供什么帮助吧～ 实际使用场景 数据缓存 首先就是 SWR 的核心功能 数据缓存...对于用户来说就是我点击了删除后，那条数据直接消失了，而且还避免了表格在 有数据的情况与加载动画切换时 组件会快速闪一下的问题。...请求错误重试 接着就是 请求重试 了，大家可以尝试着搜一搜 axios 请求错误重试 这个关键字，可以在很多文章中看到大家对 aioxs 响应拦截器进行一些封装处理，实现当满足某种错误条件时进行错误重试...swr 我的数据已经发生变化啦，赶紧给我更新一波。...这里需要注意一下，在 React 官方文档中提到了 hooks-rules[4] ： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们
服务器状态管理 tanstack query TanStack Query（前身为 React Query）经常被描述为 Web 应用程序中缺失的数据获取库，但更具技术性的说法是，它使得在 Web 应用程序中获取...然而，如果你和大多数人一样，你可能尚未解决所有或大部分这些挑战，我们只是触及到了表面！ React Query 毫无疑问是管理服务器状态的最佳库之一。...它可以直接使用，零配置，并且可以根据你的需求进行定制，随着应用程序的发展。 React Query 让你能够战胜服务器状态的复杂挑战和障碍，在它开始控制你的应用程序数据之前掌控它。...RTK Query 从先驱解决数据获取问题的其他工具（如 Apollo Client、React Query、Urql 和 SWR）中获得灵感，但在其 API 设计中增加了独特的方法： 数据获取和缓存逻辑是构建在...字段，并在组件挂载和卸载时管理缓存数据的生命周期 RTK Query 提供了“缓存条目生命周期”选项，可以通过 WebSocket 消息流式传输缓存更新，以在获取初始数据后使用 我们有从 OpenAPI
大家好，我卡颂。有一句话相信大家都听过：取代泡面的，并不是更高级的泡面，而是外卖的兴起在前端领域，也存在同样的现象。...所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。...所以，React-Query还是有用武之地。类似的，在全栈框架Next.js中，也推荐在CSR（客户端渲染）时使用同团队开发的缓存库SWR用于数据的同步操作。...:["$","p",null,{"children":["你好，卡颂"]}]这种数据结构有2个特点：是序列化数据，反序列化后React可以识别每行一条数据，方便流式传输序列化数据可以显著提高SSR的灵活性...图片把这个模型套在数据同步的场景：之前，数据同步的逻辑主要发生在位于前端的React-Query中现在，数据同步的逻辑发生在后端既然数据同步的逻辑发生在后端，显然就不需要运行在前端的React-Query
代码仓库 界面截图 案例展示 技术选型 小程序 底层框架: Taro 3.0 (React) 界面：Vant 状态机：SWR 管理后台界面 底层框架：React 界面：eui 状态机：SWR 服务端 CloudBase...云开发 目前Taro已经进入了3.x时代，可以让开发者使用完整的React、Vue等框架进行开发。...在Hook方案中调研了两个库 react-query与swr，整体来说swr更加的轻量便捷。...本文末尾会放出一张用工这个控件库做工具类应用的图^1，完全是用EUI控件组合出来的，大家可以感受一下。...在源码中我专门留下了一个ext的文件夹，并对EUI的表单控件进行了二次封装。
过去 类组件 在React的类组件时代，请求数据的时机经常放在componentDidMount中，然后state中需要有一个变量记录当前是否正在请求接口，在请求的前后需要手动去改变这些状态，大概代码如下...'正在加载中...' : ( ); } 未来 Suspense组件 + useSWR React发布了Suspense以后，数据请求又有了新思路，我们可以在视图容器的外层包裹一层...具体的代码可以看这里：codesandbox.io/s/react-swr… // Router.js import React, { Suspense } from "react"; import {...关于swr这个库的具体分析文章可以查看这篇：精读《Hooks 取数 - swr 源码》 这个Demo中在路由进入过后如果再次进入，数据会直接显示之前请求过的，你会发现这非常像Vue中的keep-alive...带来的效果，这是因为swr这个库在suspense模式下默认做了数据的缓存，如果想要关掉它目前还没在文档中看到相应的配置。
大家好，我卡颂。 React技术栈的一大优势在于 —— 社区繁荣，你业务中需要实现的功能基本都能找到对应的开源库。 但繁荣也有不好的一面 —— 要实现同样的功能，有太多选择，到底选哪个？...组件状态 对于组件的局部状态，如果只有组件自身以及他的子孙组件需要这部分状态，那么可以用useState或useReducer保存他们。...服务端缓存状态 对于从服务端请求而来，缓存在前端的数据，虽然可以用上述处理「应用状态」的工具解决，但「服务端缓存状态」相比于「应用状态」，还涉及到「缓存失效」、「序列化数据」等问题。...所以最好用专门的工具处理，比如： react-query - REST + GraphQL swr - REST + GraphQL apollo client - GraphQL urql - GraphQl...欢迎在评论区交流项目架构中的最佳实践。 参考资料 [1] Bulletproof React: https://github.com/alan2207/bulletproof-react
技术选型 小程序 底层框架: Taro 3.0 (React) 界面：Vant 状态机：SWR 管理后台界面 底层框架：React 界面：eui 状态机：SWR 服务端 CloudBase...云开发 目前Taro已经进入了3.x时代，可以让开发者使用完整的React、Vue等框架进行开发。...在Hook方案中调研了两个库 react-query与swr，整体来说swr更加的轻量便捷。...本文末尾会放出一张用工这个控件库做工具类应用的图[1]，完全是用EUI控件组合出来的，大家可以感受一下。...在源码中我专门留下了一个ext的文件夹，并对EUI的表单控件进行了二次封装。
过去 类组件 在React的类组件时代，请求数据的时机经常放在componentDidMount中，然后state中需要有一个变量记录当前是否正在请求接口，在请求的前后需要手动去改变这些状态，大概代码如下...在Hook时代我们可以把请求前后的loading状态变量在自定义hook中管理起来，代码示例： const useRequest = (fn, dependencies = []) => { const...具体的代码可以看这里：codesandbox.io/s/react-swr… // Router.js import React, { Suspense } from "react"; import {...关于swr这个库的具体分析文章可以查看这篇：精读《Hooks 取数 - swr 源码》 这个Demo中在路由进入过后如果再次进入，数据会直接显示之前请求过的，你会发现这非常像Vue中的keep-alive...带来的效果，这是因为swr这个库在suspense模式下默认做了数据的缓存，如果想要关掉它目前还没在文档中看到相应的配置。
从 class 迈向 struct；从 class 迈向 function 在写 SwiftUI 的时候总是让我想到 React 的发展史。...从 SwiftUI 当中我们也可以看到类似的演进，原本 ViewController 庞大的 class 以及职责，要负责 view 与 model 的互动，掌管生命周期，转为更轻量的 struct，让开发者可以更专注在...Redux 与 TCA 受到 Redux 的影响，在 Swift 当中也有部分开发者使用了采用了类似手法，甚至也有相对应的实作 ReSwift的说明文。从说明文可以看到主要原因。...取而代之的是更加轻量的状态管理机制，在前端也衍生出了几个流派： GraphQL → 使用 apollo[5] 或是 relay[6] react-query[7] react-swr[8] recoil...: https://react-query.tanstack.com/ [8] react-swr: https://swr.vercel.app/zh-CN [9] recoil: https://recoiljs.org
所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。 总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。...所以，React-Query还是有用武之地。 类似的，在全栈框架Next.js中，也推荐在CSR（客户端渲染）时使用同团队开发的缓存库SWR用于数据的同步操作。...序列化数据的意义 在React中，对于如下JSX： const name = "卡颂"; 你好，{name} 在传统SSR中，经由后端处理后，传递给前端的是如下HTML结构： 你好...1:["$","p",null,{"children":["你好，卡颂"]}] 这种数据结构有2个特点： 是序列化数据，反序列化后React可以识别 每行一条数据，方便流式传输 序列化数据可以显著提高...把这个模型套在「数据同步」的场景： 之前，「数据同步」的逻辑主要发生在位于前端的React-Query中 现在，「数据同步」的逻辑发生在后端 既然「数据同步」的逻辑发生在后端，显然就不需要运行在前端的React-Query
写这篇文章的动机可以追溯到 3 年前， 我发现很多身边开发者并没有正确地使用 React Hooks, 所以我觉得应该把我的开发经验和思维整理下来。...一些和 RxJS 相似的概念 响应式数据。我们用 ref 或reactive 创建的数据，可以等似于 RxJS 的 Observable。...它封装了网络请求， useRequest 可以基于 swrv(swr 在 Vue 下的实现, 非官方)、或者VueUse 里面的 computedAsync、useFetch 来封装。...读者也没必要读懂这些代码，我看到也头大，你只需要记住，这个充斥着我们上文提到的各种坏味道：过渡依赖 watch、数据流混乱… 让我们回归到业务本身，我们为什么需要不恪守这样的联动关系去组织代码呢？...这里提醒一下读者：“不要吝啬创建组件” 我在 React组件设计实践总结04 - 组件的思维 中讲过： 大部分情况下, 组件表示是一个 UI 对象.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
