use SWR为什么能成为我的最爱React库?

全文共2355字,预计学习时长12分钟

 

use SWR为什么能成为我的最爱React库?

图源:unsplash

 

在过去的几个月里,我一直在开发Next JS应用程序。应用程序使用axiosto进行API调用,然后用unstated next作为状态解决方案。

 

有很多API调用,我们不希望用户体验太多加载屏幕。因此,我们将axios调用的结果存储在未声明的存储中。但我们遇到了一个问题,商店本身变得越来越复杂。这是有些页面依赖于几个API调用,有些API调用依赖于其他API调用的结果。

 

一周一周地过去,一些不知名的存储变得越来越笨重。我们开始遇到奇怪错误,出现了我们自制的缓存逻辑难以处理罕见的边缘情况。一定有更好的办法。没错,确实有,恰巧它就是由Vercel——Next JS的创造者制作的。

 

Enter SWR

 

SWR的名字来自stale-while-revalidate,是一种在前端领域越来越流行的缓存策略。它能够立即加载缓存的内容,同时刷新该内容,以便提供更新的内容。

 

对我们来说,这是性能和用户体验之间的完美权衡。

 

useSWR —如何使用它?

 

use SWR为什么能成为我的最爱React库?

图源:unsplash

 

useSWR是一个由Vercel制作的React Hook库。它从API或其他外部源获取数据,然后将数据保存在缓存中,并呈现数据。先来看一个React组件的示例,该组件从JSON服务器获取todo列表并呈现它们:

 

import React from"react";
import "./App.css";const todosEndpoint = "http://localhost:3001/todos";const TodoApp = () =>{
  const [todos
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值