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

2022 年 react 生态,大家都用啥

  •  2
     
  •   yuthelloworld ·
    yuthelloworld · 55 天前 · 11094 次点击
    这是一个创建于 55 天前的主题,其中的信息可能已经有所发展或是发生改变。

    去看了一圈 React 的生态,光状态管理就有很多库,还有自己的 useRedcuer + useContext 可以做状态管理。数据请求相关的有 React Query 。

    我自己还停留在 React + Ts + Redux 这一套。奥,react-router 6 也有不少更新点。

    学不动了,譬如说 Rtk, Rtk query ,光看文档都需要投入不少时间,Recoil 倒是上手挺容易的。

    大家现在都用啥?或者说公司都用啥?是跟上生态脚步,还是停留在老的?

    第 1 条附言  ·  54 天前

    给大家去对比了下几个状态管理库的npm下载趋势

    https://www.npmtrends.com/@reduxjs/toolkit-vs-jotai-vs-mobx-vs-recoil-vs-redux-vs-xstate-vs-zustand-vs-valtio

    141 条回复    2022-06-02 12:31:58 +08:00
    1  2  
    Heymans
        1
    Heymans  
       55 天前
    antdesign 大礼包
    westoy
        2
    westoy  
       55 天前
    antd, useModel 又不是不能用
    dengqing
        3
    dengqing  
       55 天前
    rtk 太难用了,react-query 简单易用
    isukkaw
        4
    isukkaw  
       55 天前   ❤️ 7
    状态管理用 jotai 、全局状态管理用 zustand 、网络请求用 swr 、UI 用 MUI 或者 Mantine 。
    statumer
        5
    statumer  
       55 天前 via iPhone
    只用 mobx 和 context ,redux + redux toolkit 我感觉真的很难用,总是要把局部组件放到全局去考虑。
    qW7bo2FbzbC0
        6
    qW7bo2FbzbC0  
       55 天前   ❤️ 1
    太多名词了,像我这样脑子不好使的听着就迷糊,半天下来技术没学多少,光记单词和释义了
    waising
        7
    waising  
       55 天前
    antd, react-router 6, jotai, axios
    bthulu
        8
    bthulu  
       55 天前
    我这里大家都用 localStorage, 浏览器自带, 贼好用, 控制台跟踪也方便
    nijjba
        9
    nijjba  
       55 天前 via iPhone
    use-context-selector
    FrankFang128
        10
    FrankFang128  
       55 天前
    React 就是这样,千人千面
    pigspy
        11
    pigspy  
       55 天前
    就用到了一个 mobx ,说实话我连 mobx 都觉得没有用的必要
    yuthelloworld
        12
    yuthelloworld  
    OP
       55 天前
    还有 css 相关,less\sass\css-module 是一直在用的。用过 jss ,比较火的 tailwind 没用过
    liliclinton
        13
    liliclinton  
       55 天前
    状态管理用 jotai ,数据请求用 swr 和 urql
    yuthelloworld
        14
    yuthelloworld  
    OP
       55 天前
    @liliclinton #13 @isukkaw #4 搜了下,看起来 jotai 挺香

    > Jotai 和 Recoil 概念很相似,都是采用分散管理原子状态的设计模式

    所以在用法上也比较相似,但相比之下,还有以下优点

    Jotai 的 API 相对 Recoil 简洁很多,并且容易使用
    Jotai 不需要用 RecoilRoot 或 Provider 等组件包裹,使得结构可以更简洁
    Jotai 定义 Atom 时不用提供 key
    Jotai 更小巧,大小仅 2.4 kB
    Jotai 对 TypeScript 的支持更好
    jin5354
        15
    jin5354  
       55 天前   ❤️ 1
    @isukkaw 好家伙 4 个词全没听过,感觉自己要下岗了
    rwecho
        16
    rwecho  
       55 天前 via Android
    react next.js chakra ui redux toolkit
    kangyan
        17
    kangyan  
       55 天前
    我用 umi 的 useModel 。

    刚才看了一下 jotai ,用法的确简单,就怕和 useState 混淆
    um1ng
        18
    um1ng  
       55 天前   ❤️ 2
    怎么感觉比 vue 生态还要乱...

    现在 vue3 + vite + ts + pinia 真的挺香的
    Jsonz
        19
    Jsonz  
       55 天前
    状态管理一直用 rematch...redux 衍生物,jotai 看起来不错
    yuthelloworld
        20
    yuthelloworld  
    OP
       55 天前
    @um1ng #18 vue 生态,我还停留在 vue2+vuex+vue-router
    SolidZORO
        21
    SolidZORO  
       55 天前 via iPhone
    状态管理这块。喜欢分布式就 jotai ,喜欢中心化就 valtio 。目前所有项目已从 jotai 转到 valtio ,就只为了在 jsx 之外也能拿到 state ,感觉很好。体积从 2KB 变成 6KB ,基本上可以忽略不计。
    yazoox
        22
    yazoox  
       55 天前
    就多使用了一个 hooks
    还是 redux & redux-saga
    um1ng
        23
    um1ng  
       55 天前
    @yuthelloworld 大人 时代变了
    isukkaw
        24
    isukkaw  
       55 天前
    @jin5354 #15 该关注关注 React 生态圈的新玩意啦。
    @kangyan #16 完全不怕混淆,jotai 的 API 就是照搬 useState 设计的。如果你没有局部状态必须 useState 的洁癖的话,完全无所谓。
    @SolidZORO #21 如果需要中心化状态、又喜欢 immutable 的话,可以考虑 zustand 。valtio 、jotai 同作者出品,支持 vanilla ,支持状态中间件,支持 Reducer ,最大的优势是把 state 和 action 写在一起。
    yuthelloworld
        25
    yuthelloworld  
    OP
       55 天前
    @um1ng #23 学不动了。项目用啥我就学啥。在做的项目,ts 还没用上,也不可能重构上 vue3 。
    Ansen
        26
    Ansen  
       55 天前
    antdesign 一把梭
    xieren58
        27
    xieren58  
       55 天前
    solidjs
    putaozhenhaochi
        28
    putaozhenhaochi  
       55 天前 via Android
    zustand ,valtio 、jotai 国外开发者是不是都财务自由啦。 造轮子凶的一笔
    dcsuibian
        29
    dcsuibian  
       55 天前
    React 就是这样的,吐槽的都累了。
    yuthelloworld
        30
    yuthelloworld  
    OP
       55 天前
    @dcsuibian #29 有时候想想真的有必要紧跟这些新的工具库么?回过头看过去 5 年用的,很多库已经停止维护。
    SolidZORO
        31
    SolidZORO  
       55 天前 via iPhone
    @isukkaw v 站没有引用特指回复 #24 ,z 虽然也好但是写法相对于 v 太复杂了。

    其实可以这么理解 p 家的几个 state lib 。jotai 其实是一切的桥梁,是一个大平台,你想要的 z ,v ,甚至是 localstore 、RQ 什么的,都可以在 jotai 中实现桥接!他就是 p 家的万精油,但是可惜,valtio 实在太好用太简洁了,是一个 mobx-like 的小 lib ,使用上非常先进,也没有 mobx 这种包一层入侵你代码的 observer ,就是纯粹,状态就在哪里了,你想什么读怎么改都行!特别适合某些项目五六层深度的组件忽然想改爸爸的爸爸的爷爷组件中的某个 flag……

    诶,打住不多说了,让大家自己选择吧,valtio 比起 jotai 实在太小众太不出名了。但是却很够用。
    yuthelloworld
        32
    yuthelloworld  
    OP
       55 天前
    @SolidZORO #31 别打住,给大家推荐下,哈哈
    SolidZORO
        33
    SolidZORO  
       55 天前 via iPhone   ❤️ 1
    推荐如果没有强烈的 immutable 需求还真的就只推 valtio 。

    jotai 很好,但有个问题(也可能不是),就是你用一个 atom ,比如 [a, setA] = useAtom(aAtom),你写 100 个组件里面的 a 名字就都不一样,但是用的 aAtom 是一个,这样在重构的时候很容易发生疏漏。当然回到我之前说也可能不是问题的问题那句话,可能这就是分布式应有的风格,所以我也无法过多评论。

    状态总体分为 api state 也可以说是 data state 。还有一些 global state ,这个保存一些 token 啊 全局 setting 啊(也来自 api )。

    react-query 解决了 data state ,是没错,但是其实还要一个 state lib 来存放其他 global state ,并且理想状态这些 global 可以被观察 effect 。如果没有这个需求,那你大可存在 window 。

    所以,基于上面的前提,我是觉得 RQ + valtio 是够用且好用的。
    ck65
        34
    ck65  
       55 天前
    UI: evergreen-ui
    Router: react-router-dom
    State: @rematch/core
    Network: axios
    Date/time: dayjs
    SolidZORO
        35
    SolidZORO  
       55 天前 via iPhone
    而且选型最好还是看看是否通用,比如支不支持 SSR 啦,支不支持 Taro 啊什么的。

    我开始用 valtio 的时候发现没有 next.js 方案,或者说这个 lib 他妈的太小众了,根本没有同时用 valtio 又用 next.js 的人。结果我看了一下,发现很好解决啊,server 那边注水了放在 window ,然后 client 这边让 valtio 初始化加载 window 上的 INIT_STATE 就好了嘛。

    不过也可能因为官方不支持,所以用的人很好,毕竟 SSR 这种原理大部分人都不明白为什么,会用 next.js 就行了。

    之前用 recoil 的时候其实是因为不支持 Taro 而弃坑的,没明白为什么一个 state lib 要写那么复杂用那么多 api 。

    再就是,泛用性的 lib 比如 mobx 这种,本身 mobx 性能是很好的,或者说极其好!但是一架上 mobx-react 就 gg 了,性能断崖式下跌,当然一般人不处理那种一个 page 几万个 nodes 的应该也不会有什么感觉。但优先选择我还是会选 react ONLY 的 lib ,毕竟针对 render 是有优化的。
    yaphets666
        36
    yaphets666  
       55 天前
    @bthulu 说笑了我的哥
    yuthelloworld
        37
    yuthelloworld  
    OP
       55 天前
    @SolidZORO #35 通用性确实是之前没考虑过的
    h1104350235
        38
    h1104350235  
       55 天前
    react 对新手太远了,因为太多选择
    h1104350235
        39
    h1104350235  
       55 天前
    react 对新手太难了,因为太多选择
    dk7952638
        40
    dk7952638  
       55 天前
    已转 svelte 生态,老码农面向养生编程
    zhuangzhuang1988
        41
    zhuangzhuang1988  
       55 天前
    已经放弃了用 vue 了
    react 给牛逼的用的。
    Huelse
        42
    Huelse  
       55 天前
    像外网评论的那样,react 最好需要个深耕其中的人来带领,不然就库选择上都要踩坑好久
    zzlatan
        43
    zzlatan  
       55 天前
    前端真特么瞎折腾 。。。这库那库的
    beisilu
        44
    beisilu  
       55 天前
    其实可以尝试弄个像 Flutter Favorites 的栏目, 挑选一些人气、文档和 demo 都比较好的库
    windyboy
        45
    windyboy  
       55 天前
    没有人用 svelte 吗?
    MAGA2022
        46
    MAGA2022  
       55 天前
    vue 3 + ts 是真的香
    gogogo1203
        47
    gogogo1203  
       55 天前
    animation: framer-motion + Three.js
    Router: react-router-dom
    form: formik+yup
    api: axios+react query
    state manager : zustand
    utility:lodash+immer
    css: [email protected]
    UX\UI : react-hot-toast react-spinners-kit @heroicons/react react-dnd timeago-react

    vite\typescript\ eslint prettier\ eslint-config-airbn eslint-config-airbnb-typescript
    dany813
        48
    dany813  
       55 天前
    轮子太多了,跟不上
    angrylid
        49
    angrylid  
       55 天前 via Android
    vue 现在可以写 tsx 吧
    sweetcola
        50
    sweetcola  
       55 天前
    我自己的话是所有库都更新到最新的,React v18 ,React-Redux v8 ,RTK (Redux toolkit),TypeScript ,UI 是自己写不用任何库。

    库选自己熟悉的就可以了,存在那么多库的意思就是“都可以”。如果在烦恼这一点,那说明是想整最佳实践,既然想整最佳实践,花点时间来选择不才是正确的吗?

    另外就是 Redux 原来的写法已经是官方不建议了,具体可以看这篇文章 https://redux.js.org/introduction/why-rtk-is-redux-today
    um1ng
        51
    um1ng  
       55 天前
    @angrylid 可以 很丝滑
    xunjianxiang
        52
    xunjianxiang  
       55 天前   ❤️ 2
    Angular 可能是你最后的归宿!!
    reorx
        53
    reorx  
       55 天前 via iPhone
    mobx 挺好,最近简单看过 swr ,ReactQuery ,zustand ,Jotai ,感觉都不能替代 mobx
    SolidZORO
        54
    SolidZORO  
       55 天前
    @reorx 代替 mobx 的只可能是 valtio 这类 Proxy-like 的 lib ,别的 lib 出发点就不是去代替 mobx 的。
    terranboy
        55
    terranboy  
       55 天前
    用了 REMIX 没必要用这些乱七八糟的状态管理库了
    isukkaw
        56
    isukkaw  
       55 天前
    @SolidZORO #33

    你觉得用 jotai 时重构会出疏漏说明你对 jotai 的理解不到位。
    和 Recoil 基于字面量的 key 索引状态不同,jotai 是基于引用的。所以如果你要重构基于 jotai 的状态,正确做法是找到声明的 atom ,然后 IDE 中右键寻找所有引用;而不是试图去根据名字去找。
    bthulu
        57
    bthulu  
       55 天前
    @yaphets666 不要看不起 localStorage, jotai 不也有提供 localStorage 的桥接么. 你就把它当成后端的数据库. 抽出一个 js 文件处理与 localStorage 的交互, 其余组件里需要共享状态的引入这个文件就行了. 简单方便快捷, 是个人就能马上上手, 不比这库那库的强?
    LiuJiang
        58
    LiuJiang  
       55 天前
    svelte 就是一个"杂交物",当然,这里的"杂交物"是一个褒义词,吸收各大框架的优点,整出来的玩意,也挺有意思的,我没在生产中用过
    LiuJiang
        59
    LiuJiang  
       55 天前
    @SolidZORO mobx-react 有性能数据吗?
    danhahaha
        60
    danhahaha  
       55 天前
    生态已经有了,就缺化反了
    SolidZORO
        61
    SolidZORO  
       55 天前
    @isukkaw #56

    这么 nb 的吗?我刚试了下,貌似不行,用的 JB IDEA ,可否指教一下这种重构操作是怎么实现的? IDEA 会根据 atom 找到 useAtom 前面 [a, setA] 的中 a ?然后全部重命名。

    我再描述一下问题吧,比如我有 2 个 comp:


    ```
    // A-Comp

    const [isOpen, setIsOpen] = useAtom(atomA);

    ```


    ```
    // B-Comp

    const [isVisible, setIsVisible] = useAtom(atomA);

    ```

    假如 isOpen 在代码中用了,不过我觉得不够好,想改成 isVisible ,这个时候其实 isVisible 和 isOpen 做了同样的事情,也引用了同样的一个 atomA ,但是他们两并不能互相知道,也没必要知道。

    但是作为开发者来说,我希望他们应该一样才对,因为都是引用同一个 atomA ,即便是他们名字不一样但是只要 atomA 变了,他们两都要变。

    我不知道这样描述是否妥当,我就是自身没办法规避和解决这个问题,所以换成了中心化的 valtio 。
    SolidZORO
        63
    SolidZORO  
       55 天前
    @bthulu hhhh ,LS 是好的,但是怎么观察 LS 已经改了呢?事实上,state 存哪里不重要,重要的是 state 发生变化了,其他组件要能知道,以便做出响应的变化。
    charlie21
        64
    charlie21  
       55 天前
    如果不用 next.js ,如何做 ssr 服务器端渲染
    um1ng
        65
    um1ng  
       55 天前
    wobuhuicode
        66
    wobuhuicode  
       55 天前
    写了那么多年都是:React + Redux + react-router 一套下来。去哪都不吃亏。
    ccyu220
        67
    ccyu220  
       55 天前
    vite + redux-toolkit + react-router 再加个 less 和 tailwindcss ,没有什么不能做的吧
    beginor
        68
    beginor  
       55 天前 via Android
    我自己用这个组合 react-router ,react-bootstrap ,fetch ,rxjs
    magicdawn
        69
    magicdawn  
       55 天前
    强推 easy-peasy, rtk 太繁琐了
    ruoxie
        70
    ruoxie  
       55 天前
    我只知道 redux 最难用,最恶心
    TabGre
        71
    TabGre  
       55 天前   ❤️ 11
    在这里学来不少于 20 个的新名词
    FreshOldMan
        72
    FreshOldMan  
       55 天前
    前端更新库这么快,真的对你们的项目有很大的提升吗?
    kingsleydon
        73
    kingsleydon  
       55 天前
    mui emotion next.js jotai swr
    Sain
        74
    Sain  
       55 天前
    umi antdpro 一把梭
    me221
        75
    me221  
       55 天前
    @yuthelloworld 推荐 unocss+windicss
    lydhr
        76
    lydhr  
       55 天前
    nextJS + tailwindCSS
    m1911star
        77
    m1911star  
       55 天前
    umi + antd ,7 月打算切换到 vite
    stillsilly
        78
    stillsilly  
       55 天前
    为什么要搞这么多东西…… 解决了什么问题
    ccyu220
        79
    ccyu220  
       54 天前   ❤️ 4
    又重新看了这个贴,我发现我已经不会 React 了。

    我把上面说的那些库的 GitHub 打开,每个都有那么多的 Star 。

    到底是我我落伍了还是更新太快。
    christin
        80
    christin  
       54 天前 via iPhone
    公司还在用 dva ,想迁也没办法迁,之前的文件太多了
    bthulu
        81
    bthulu  
       54 天前
    @SolidZORO 抽出一个 store.js 专门与 localStorage 交互. 通过 store.js 取出所需状态初始化 state 后, 再将 setState 函数挂到这个状态的回调函数数组里, 组件销毁时再从这个数组里移除掉. 有任意组件想改变这个状态, 调用 store.js 里的修改方法, 这个修改方法负责将数据存在 localStorage 里, 并依次执行之前挂载的回调函数.
    yuthelloworld
        82
    yuthelloworld  
    OP
       54 天前
    @ccyu220 #79 歪果仁造轮子的能力确实强
    ccyu220
        83
    ccyu220  
       54 天前
    @yuthelloworld 算了 Web 端还是主 Vue3 吧,起码没有心智负担。
    yuthelloworld
        84
    yuthelloworld  
    OP
       54 天前
    @ccyu220 #83 没写过 vue3 ,和 ts 兼容的好吗
    ccyu220
        85
    ccyu220  
       54 天前
    @yuthelloworld 没什么问题
    Lancer777
        86
    Lancer777  
       54 天前
    @um1ng 看 star 没有意义,看 npm 下载量才知道区别有多大。
    MartinAgerAdams
        87
    MartinAgerAdams  
       54 天前   ❤️ 1
    react: react 17 or 18
    router: react-router 6
    ui framework: antd
    state manager: zustand
    api: axios + react-query
    css: classnames + tailwindcss + styled-components
    dev: vite
    MartinAgerAdams
        88
    MartinAgerAdams  
       54 天前
    @ccyu220
    > 算了 Web 端还是主 Vue3 吧,起码没有心智负担。

    不太同意这个。
    1. 单纯从相关概念来说,Vue 是编译时的。为了编译优化或者其他,造了一大堆语法和概念,虽然不难,但是我感觉增加了心智负担。
    2. React 是运行时的。JSX 写法上就是 JS 一把梭,不用管那么多概念,当然这个也是相对的,肯定也会有人感觉它其其他地方增加心智负担(比如楼上的一些回答)
    nzbin
        89
    nzbin  
       54 天前
    @xunjianxiang react 和 vue 所有一套下来和 angular 也差不多了,但是开发体验还是 angular 丝滑
    wakaka
        90
    wakaka  
       54 天前
    前端卷得太厉害了
    yuthelloworld
        91
    yuthelloworld  
    OP
       54 天前
    @MartinAgerAdams #88 vue 确实语法糖比较多。react 相对都是原生 js 的语法。心智负担感觉主要是百花齐放的各种库
    lolizeppelin
        92
    lolizeppelin  
       54 天前
    换 angluar 全包不用想多好
    fyxtc
        93
    fyxtc  
       54 天前
    前端真是终生学习。。。。
    guoliim
        94
    guoliim  
       54 天前
    nextjs react-query
    CodingNaux
        95
    CodingNaux  
       54 天前   ❤️ 1
    喜欢 vue?直接全部 vue3 composition api 还好
    要是项目里同时有 option api, compositon api, 点 vue 文件,点 tsx 文件简直了。
    vue 的 mixin 到现在还有人用,怎么维护,怎么重构
    vue 的 this 漫天飞怎么维护,怎么重构
    vue 还有人不知道怎么写 tsx ,复杂模版的冗余代码怎么维护

    就学 react 吧,就是 js ,就那么几个 api
    说 angular 好的,有几个真正深度用上
    Liam1997
        96
    Liam1997  
       54 天前
    2022 年了,组里还在用 dva 那一套。。。
    sjhhjx0122
        97
    sjhhjx0122  
       54 天前   ❤️ 1
    @CodingNaux 你说的 vue 问题,angular 全能解决啊多好啊
    GiantHard
        98
    GiantHard  
       54 天前
    再补充一个跟 mobx 、valtio 一个路子的状态管理库 reactivue ,在 react 里面用 vue3 的 Composition API
    nzbin
        99
    nzbin  
       54 天前
    @CodingNaux 我们就在用,确实省心省力
    beginor
        100
    beginor  
       54 天前 via Android
    @CodingNaux 公司用 angular 做了几年项目,确实省心,但是奈何国内 vue 一边倒了,几乎招不到 angular 的人,新进的都是 vue
    1  2  
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1167 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 231ms · UTC 19:19 · PVG 03:19 · LAX 12:19 · JFK 15:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.