V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shuding
V2EX  ›  React

React 数据请求库 SWR 发布 1.0 正式版本

  •  
  •   shuding ·
    shuding · 2021-09-17 23:04:00 +08:00 · 1697 次点击
    这是一个创建于 1160 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目地址: https://github.com/vercel/swr
    中文文档: https://swr.vercel.app/zh-CN

    SWR 是一个轻量且便捷的 React hook 数据请求库,基础功能仅一行代码:

    import useSWR from 'swr'
    
    function Profile() {
      const { data, error } = useSWR('/api/user', fetcher)
    
      if (error) return <div>failed to load</div>
      if (!data) return <div>loading...</div>
      return <div>hello {data.name}!</div>
    }
    

    自带了请求去重、错误重试、缓存、轮询、分页、页面聚焦自动重载、服务端渲染( SSR/SSG )、Suspense 、React Native 支持 等等功能

    1.0 版本变化

    • 更轻量:在没有删除任何现有功能的前提下,
      • 核心减小 41%(压缩后为 24%,3.9 kB )
      • 安装包减小 52%
      • 改进 tree-shaking
    • 支持预加载的数据作为 fallback:对于服务端渲染、静态渲染等场景有更好的支持
    • 支持 immutable 模式:可定义数据为 immutable,不重复请求
    • 中间件( middleware )支持:多种场景扩展(示例
    • 自定义缓存提供层:持久化、离线、测试等场景(文档

    详情请阅读 1.0 版本博客文章: https://swr.vercel.app/zh-CN/blog/swr-v1

    后续版本计划


    欢迎给 SWR 提供贡献和建议: https://github.com/vercel/swr 或留言!♥

    10 条回复    2021-09-18 23:35:57 +08:00
    int64ago
        1
    int64ago  
       2021-09-17 23:16:39 +08:00
    居然是 Vercel 大佬亲自来推广
    shuding
        2
    shuding  
    OP
       2021-09-17 23:22:55 +08:00
    @int64ago 最近社区翻译了博客和文档,就想着分享到中文站点 :D
    kxxoling
        3
    kxxoling  
       2021-09-17 23:52:38 +08:00
    同时在用 react-query 和 SWR,都挺好的。借地问个问题,因为要用到某些国内项目的奇葩的 SDK,在 SSR 环境保守折磨,有什么全局或者部分关闭 Next.js SSR 的办法吗?
    shuding
        4
    shuding  
    OP
       2021-09-18 00:25:25 +08:00   ❤️ 1
    @kxxoling 可以实现在一个新的页面组件里面,然后用 `dynamic` 的 `{ ssr: false }` 选项引入:

    ```js
    // pages/index.js
    const DynamicComponentWithNoSSR = dynamic(
    () => import('../components/no-ssr-page'),
    { ssr: false }
    )

    export default Page () {
    return <DynamicComponentWithNoSSR/>
    }
    ```

    把原本的实现都放进 `components/no-ssr-page`,就不会被 SSR 影响到。

    https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
    kxxoling
        5
    kxxoling  
       2021-09-18 00:42:44 +08:00
    @shuding 我试试,之前因为是模块本身的问题,把第三方模块改成了 dynamic import 还是不行,dynamic import 页面组件倒是没考虑到。我试试这个思路。
    find456789
        6
    find456789  
       2021-09-18 01:03:14 +08:00
    请问大佬,swr 能完全替代 react-query 吗, swr 和 react-query 比起来,有啥优势吗

    谢谢
    shuding
        7
    shuding  
    OP
       2021-09-18 01:48:38 +08:00   ❤️ 2
    @find456789 功能上能完全替代。

    两个项目的设计思路不一样,SWR 注重使用体验以及性能、希望引入尽可能少的概念,保持极简和易用。RQ 则包含了很多几乎用不到的功能和概念,比如 “双向无穷加载”。两个库在大小上差了三倍多:SWR 4KB,RQ 12.3KB 。

    另外最开始 RQ 抄袭了 SWR 的一些创新(比如 stale-while-revalidate 、focus revalidate 等等),值得指出但不影响用户选择。
    B3C933r4qRb1HyrL
        8
    B3C933r4qRb1HyrL  
       2021-09-18 09:51:11 +08:00   ❤️ 1
    vercel 的产品真的很不戳
    shunia
        9
    shunia  
       2021-09-18 10:51:10 +08:00   ❤️ 1
    用过几次 react-query,见过 swr 很多次但是没有使用过。
    刚刚去仔细看了一下 swr 的文档,看起来在用法上比 react-query 稍微轻巧一些,比如 react-query 的 {enable} 选项,在 swr 实现的很自然。

    但是不知道是不是我的问题,感觉 swr 的中文文档不太好理解,比如:
    “条件数据请求”里解释 key 不变会导致即使 token 变化也会返回脏数据,这一部分的解释看的我挺懵的,继续往下看并且结合曾在 react-query 中看到过的解释才理解,原来是因为 hook 的第一个参数整体被当做一个 key,来处理了缓存相关的功能,所以 fetcher 里面的逻辑在 key 不变的情况下可能根本不会被触发。
    另外对于“传入参数”这部分文档,我感觉最顶上的“等价”部分反而会导致理解混淆:当我看到等价的时候,下意识的觉得“既然等价那就都可以咯?”,但是其实这部分文档更重要的是说明 hook 第一个参数的整体性。即当你需要可变参数时,不要在 fetcher 方法里直接引用,而是使用 hook 的第一个参数,利用数组进行传参,从而实现当数组数据变化时,引发 key ( swr 概念中的) 变化,进而触发 swr 进行重新计算和验证。这个概念其实就是主流框架本身的概念,还是挺好理解的。但是因为没有解释,不容易触发联想。而且还有最上面的文档来混淆。。。

    我个人感觉的话,其实 react-query 的文档也比较让人头大,因为他虽然每个概念解释的很细,但是不太具有关联性,需要自己在使用中串联起来。swr 的文档则是不够细,主体以小例子为主,少见介绍背后的原理或者原因,所以理解起来比较困难。
    shuding
        10
    shuding  
    OP
       2021-09-18 23:35:57 +08:00 via iPhone
    @shunia 多谢反馈!文档确实还有很多问题,很多地方只是用了例子,且没有详细解释概念。之后一定改进!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2941 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:27 · PVG 22:27 · LAX 06:27 · JFK 09:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.