在进行前端开发时，我们通常需要从后台获取数据。为了避免每次重新加载数据，我们可以使用缓存技术来提高页面性能。但是缓存管理是一项繁琐的任务，容易出错。这时候就可以使用SWR组件来解决这个问题。在ES11开发过程中，SWR组件被广泛应用，本文将介绍SWR组件的使用方法和指导意义。
SWR概述
SWR是stale-while-revalidate的缩写，中文翻译为"陈旧时使用、重新验证"。它是一种数据获取和管理库，是一个React组件。SWR库采用了节点缓存策略来缓存数据，并允许我们使用本地缓存和缓存刷新中间件。SWR支持自动重试、基于时间的过期和网络错误解决方案，它在下列方面极其适用：
- 可以加快 访问api的速度，因为可以减少api的调用次数。
- SWR允许你对 相同的值 进行操作，以保证内存中的数据是 最新的渲染结果。
- SWR会 自动处理错误和重试。
SWR的正确使用
下面介绍一下使用SWR来获取数据并获得最佳表现的最佳实践：
- 创建一个React组件，并使用SWR获取您的数据：
-- -------------------- ---- ------- ------ ------ ---- ------ -------- ------------- - ----- - ----- ----- - - ------------------- --------- -- ------- ------ -------------- -- ------- ------ ------------------- ------ ----------------- -
上面这段代码中，我们使用useSWR来获取数据，其中fetcher是一个回调函数，用于获取数据。我们已经避免了繁琐的缓存管理，而且当我们重新挂载组件并调用该API时，SWR会自动使用缓存来提高性能。
- 使用
revalidateOnFocus选项， 以确保在rerender之前，缓存数据已更新：
-- -------------------- ---- -------
------ ------ ---- ------
-------- ------------- -
----- - ----- ----- - - ------------------- -------- -
------------------ ----
---
-- ------- ------ --------------
-- ------- ------ -------------------
------ -----------------
-这个选项确保在用户返回该页面时，SWR将重新验证该数据。在这里，我们设置了revalidateOnFocus选项为true来确保数据每次都被更新。
- 通过
revalidateOnMount选项， 可查看 SWR在加载时是否重新验证数据
-- -------------------- ---- -------
------ ------ ---- ------
-------- ------------- -
----- - ----- ----- - - ------------------- -------- -
------------------ ----
---
-- ------- ------ --------------
-- ------- ------ -------------------
------ -----------------
-在这里，我们使用revalidateOnMount选项来确保SWR在导航到这个页面时确保重新验证数据。
结论
SWR是一种简单而有效的数据获取和管理库，可以大幅提高在前端开发时的工作效率。在使用SWR时，只需要遵循最佳实践，即可获得最佳的表现。使用SWR的物联网项目必须加倍注意性能和效率，并确保在所有开发过程中都仔细检查代码。
参考资料
- SWR文档：https://swr.vercel.app/docs/getting-started
- React-Query vs SWR：https://blog.bitsrc.io/react-query-vs-swr-comparing-two-data-fetching-libraries-for-react-57be378406a0
- 在 Next.js 中使用 SWR 缓存数据：https://www.twilio.com/blog/cache-data-react-next-js-swr
本文摘自：Here
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ccc415f551281025bb1c1