基于SWR的应用与实践
2020-09-22 10:23:33
内容作者为基因宝前端团队【一忱】
SWR 是一个轻量的、负责请求数据、缓存数据的库。开发者可以使用hooks来发起请求，使用SWR的组件会自动获取数据。
基本写法如下：
这里只列举我在使用过程中认为很方便的特性，更详细的介绍参考 SWR文档 。
上面的示例是比较原始的写法，实际项目使用中遇到了几个问题
说了这么多，根本问题就是 目录结构 。
参考了许多方案，挑选了一个我认为比较好的方案：
创建queries和mutations目录，queries放诸如useUserList用来查询数据，mutations放useUpdateUserList用来修改数据。
这样划分目录还是很清晰的，实际项目中SWR相关的hooks会很多，如果简单粗暴的将它们塞到hooks目录里难免会和其他通用的hooks混淆。
P.S.mutation实际上并不是SWR中的概念，而是 react-query 中的。
篇幅有限，详情可参考SWR开发团队成员SergioXalambrí基于react-query中的mutation概念写的 use-mutation ，当然你也可以写自己的useMutation。
如果只是需要全局状态管理，完全可以用SWR替代mobx这种库。
P.S.事实上不使用我接下来介绍的globalState hook，SWR也承担了远程数据的管理，剩下的只有一些本地状态了。
SWR也是一个比较成熟稳定的库了，国外早就开始流行SWR或react-query，截止目前已经有17.1kstars。
个人觉得使用SWR提高了我的开发效率，并且简单易学。文章只是列举了一些常见用法和重要特性，SWR的源码有很多巧妙之处，大家更深入了解一下。
如果你有其他好的idea或文章有误，欢迎讨论与指正。
参考文章：
热门标签
