react-query和SWR都是用来控制请求的库,是用来解决缓存,loading、error状态控制,乐观修改,报错重试等问题的,和axios不在一个层面 SWR是Next.js团队的 react-query是@tanStack的,先已更名 @tanStack/query,支持 React, Solid, Svelte, Vue多个框架 SWR是轻量级的控制库,轻巧易用,但是特性不广 react-query是重量级...
以下是简单实现 constcache=newMap();async functionswr(cacheKey,fetcher,cacheTime){constdata=cache.get(cacheKey)||{value:null,time:0,promise:null};cache.set(cacheKey,data);constisStaled=Date.now()-data.time>cacheTime;if(isStaled&&!data.promise){data.promise=fetcher().then((val)=>{data.val...
React Query 和著名的请求管理库 SWR 一样使用 stale-while-revalidate 的策略,这个策略是一个新的 HTTP 缓存策略,如果缓存中存在数据,请求的时候则返回缓存中过时的数据,同时重新校验缓存是否失效,最后更新数据,更新后的数据,则又更新到缓存当中。 在React Query 使用的过程中,体现就是返回得到的 Data 不一定是最...
https://swr.vercel.app/ https://github.com/vercel/swr // fetcherexportfunctionfetcher() {returnfetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response=>response.json() ); } importuseSWRfrom'swr';functionProfile() {const{ data, error } =useSWR('/api/user', fetcher)if(error...
另一个可选方案是SWR [1]。你可以从这里 [2]看到他们的区别 初识React-Query React-Query是一个基于hooks的数据请求库。 我们可以将刚才的例子用React-Query改写: import { useQuery } from 'react-query' function App() { const {data, isLoading, isError} = useQuery('userData', () => axios.get...
React-Query是一个基于hooks的数据请求库。React-Query中的Query指一个异步请求的数据源。通过使用React-Query(或SWR)这样的数据请求库,可以将服务端状态从全局状态中解放出来。 按照来源,前端有两类「状态」需要管理: 用户交互的中间状态 服务端状态 在陈年的老项目中,通常用Redux、Mobx这样的「全局状态管理方案」无...
通过使用React-Query(或SWR)这样的数据请求库,可以将服务端状态从全局状态中解放出来。 这为我们带来很多好处: 使用通用的hook处理请求中间状态 多余请求合并 针对缓存的更新/失效策略 Redux等「全局状态管理方案」可以更专注于「前端中间状态」处理 参考资料 ...
这是因为,传统的SSR主要应用在数据的首屏渲染。当首屏渲染完成,数据的后续同步操作还是发生在前端。 所以,React-Query还是有用武之地。 类似的,在全栈框架Next.js中,也推荐在CSR(客户端渲染)时使用同团队开发的缓存库SWR用于数据的同步操作。 但是,随着SSR框架开始支持序列化数据,这一切都变了。
这是因为,传统的SSR主要应用在数据的首屏渲染。当首屏渲染完成,数据的后续同步操作还是发生在前端。 所以,React-Query还是有用武之地。 类似的,在全栈框架Next.js中,也推荐在CSR(客户端渲染)时使用同团队开发的缓存库SWR用于数据的同步操作。 但是,随着SSR框架开始支持序列化数据,这一切都变了。
这是因为,传统的SSR主要应用在数据的首屏渲染。当首屏渲染完成,数据的后续同步操作还是发生在前端。 所以,React-Query还是有用武之地。 类似的,在全栈框架Next.js中,也推荐在CSR(客户端渲染)时使用同团队开发的缓存库SWR用于数据的同步操作。 但是,随着SSR框架开始支持序列化数据,这一切都变了。