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

2022 年 react 生态,大家都用啥

  •  2
     
  •   yuthelloworld ·
    yuthelloworld · 2022-05-05 12:25:52 +08:00 · 20576 次点击
    这是一个创建于 693 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    第 1 条附言  ·  2022-05-06 10:51:31 +08:00

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

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

    144 条回复    2022-12-17 01:56:02 +08:00
    1  2  
    nzbin
        101
    nzbin  
       2022-05-06 12:58:33 +08:00
    @beginor 招 JS 基础好的就行,我以前的邻居部门用 vue ,一个季度也说找不到人😂
    FightPig
        102
    FightPig  
       2022-05-06 14:09:41 +08:00
    @um1ng react 一直没有官方统一的一套,不像 vue ,几乎全是官方统一好一套,拿来就用,react-router 以前更新着,就不兼容了,所以,我一直主要用 vue ,现在不清楚啥情况
    FightPig
        103
    FightPig  
       2022-05-06 14:12:05 +08:00
    @dk7952638 svelte 的 ui 有推荐的吗
    pythonee
        104
    pythonee  
       2022-05-06 14:14:45 +08:00
    这么复杂了吗
    mknightoy
        105
    mknightoy  
       2022-05-06 14:31:25 +08:00
    进来一看各种名词铺面而来,阿巴阿巴阿巴
    isukkaw
        106
    isukkaw  
       2022-05-06 15:11:46 +08:00
    @SolidZORO #61

    我知道你说的问题是啥,不用你再描述一遍。

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

    不论你的 getter 和 setter 是什么名字,你用的都是同一个 atomA 。并不是因为你 useAtom 两次,这俩 atomA 就不一样了。这两个 atomA 的引用是相同的。

    所以你要通过 atomA 去找所有的 usage 。VSCode 就有提供寻找变量的声明和所有引用的功能。如果 IDEA 没有,说明 IDEA 并不适合拿来写 JavaScript ,说明你应该抛弃 IDEA 了。
    shabbyin
        107
    shabbyin  
       2022-05-06 15:28:07 +08:00
    不看这个帖子还不知道有这么多状态库
    简单项目我都是 useContext 一把梭
    复杂的上个 redux ,加上 useDispatch 、useState 。。
    Envov
        108
    Envov  
       2022-05-06 15:55:05 +08:00
    @isukkaw jotai 和 zustand 真是好爽,少写好多样板代码
    Valid
        109
    Valid  
       2022-05-06 16:02:57 +08:00
    什么叫生态脚步,个人觉得还是 class component 好用,代码看着清晰,怎么喜欢怎么来
    Leviathann
        110
    Leviathann  
       2022-05-06 16:29:58 +08:00
    @Valid 但是类组件没法或者很难抽象和状态相关的逻辑
    hooks 的 useMemo/Callback 和 async 一样会传染的确有点烦
    Valid
        111
    Valid  
       2022-05-06 16:38:14 +08:00
    @Leviathann 按照 react 官方的说法是后续可以在 class 中使用 hooks ,fb 还有那么多类不可能全部重写
    yamedie
        112
    yamedie  
       2022-05-06 16:52:28 +08:00
    一个 VUEer 进来看了眼评论区, 一堆千奇百怪的库名, 仿佛看到一帮 REACTer 在尬舞... 舞得好... 有空我还是继续学学 svelte 吧 [doge]
    yuthelloworld
        113
    yuthelloworld  
    OP
       2022-05-06 16:54:26 +08:00
    @yamedie #112 这不是广大 reacter 搞出来的。国内很多 reacter 还是用 antd 全家桶。轮子多了也很烦。
    junmoxiao
        114
    junmoxiao  
       2022-05-06 16:55:53 +08:00
    @zzlatan 不然 kpi 跟不上了
    IvanLi127
        115
    IvanLi127  
       2022-05-06 17:22:47 +08:00
    @CodingNaux Angular 挺好的,用着也很爽啊,就是跳槽后,没公司用了。。。
    serco
        116
    serco  
       2022-05-06 17:29:56 +08:00   ❤️ 3
    省流小助手:
    React 生态里其他的工具其实不重要,主要的变革在于状态管理库的变化,大致可分为 3 个阶段

    1. 一开始由 Flux 架构的开源实现流行起来的 Redux ,令人烦躁的点在于模板代码太多,后续的 RTK ( Redux Tool Kit )只能说是提供了一些类似语法糖 API 糖一样的做法来尽量减少模板代码,治标不治本。

    2. 为了改进或者替代 Redux 的产品 mobx valtio(proxy state) zustand 等等,排名不分先后

    3. Recoil/Jotai(Atom state) 主张状态从底往上组合,区别于 Redux 等工具的中心化然后再通过 reducer 自顶往下的做法; react-query 提出不应该是 global state ,应该是 server state + client state ,它负责解决 server state ,剩下的 client state 已经少得可怜,可自行选用工具解决
    DICK23
        117
    DICK23  
       2022-05-06 17:38:17 +08:00
    mobx YYDS
    agileago
        118
    agileago  
       2022-05-06 17:47:33 +08:00
    @MartinAgerAdams 看了上面那么多名词,感觉好累啊, 不如来用我写的 vue3-oop( https://github.com/agileago/vue3-oop) vue3 + tsx + di(类似 angular)的,完全没有任何选择困难症,需要共享状态了,就直接从上层服务注入状态,我都没明白为啥会出现这么多状态管理库? 共享状态本质上不就是要解决 2 个问题么,

    1. 跨组件使用同一状态
    2. 状态与状态之间有依赖

    - 针对第一个问题无非就是下层组件要使用上层组件的状态,直接依赖注入进去
    - 第二个问题,解决依赖关系最经典的就是依赖注入容器了,把容器加进去不就解决了?

    贴个简单的代码:

    ```tsx
    // 共享状态以及状态依赖
    @Injectable()
    class S extends VueService {
    constructor(private s2: S2) {
    super()
    }

    @Mut() count = 1

    removeAge() {
    this.s2.age--
    }
    }
    // 被依赖服务
    class S2 extends VueService {
    @Mut() age = 18
    }

    // 父组件
    @Component()
    class Parent extends VueComponent {
    constructor(private s: S) {
    super()
    }

    render() {
    const { s } = this
    return (
    <div onClick={() => s.count++}>
    {s.count}
    <Child></Child>
    </div>
    )
    }
    }

    // 子组件
    @Component()
    class Child extends VueComponent {
    constructor(@SkipSelf() private s: S) {
    super()
    }

    render() {
    const { s } = this
    return <div onClick={() => s.count++}>{s.count}</div>
    }
    }
    ```
    bthulu
        119
    bthulu  
       2022-05-06 17:56:48 +08:00
    @agileago 装饰器语法被绝大多数 js 开发者视为洪水猛兽, 注定是不会流行的
    dcsuibian
        120
    dcsuibian  
       2022-05-06 17:56:57 +08:00
    @yuthelloworld 我的感觉:
    其实如果是公司项目的话,就 antd 全家桶、umi 、dva 啥的就好了。阿里怎么来我就怎么来,资料多、别人也好接手。跟不跟,用什么都无所谓,反正大厂选了,停止维护吃亏得也不止我。
    但想写 React 个人项目的时候就比较纠结了,因为个人不做管理系统,antd 就不用了,用不上 umi 那一套。而且框架选择可以更激进,更注重开发体验,就很纠结用啥。
    agileago
        121
    agileago  
       2022-05-06 17:59:03 +08:00
    @bthulu 那 nestjs 和 typeorm 直接撞墙吧,还有 stencil ,angular 等一大堆
    bthulu
        122
    bthulu  
       2022-05-06 18:06:07 +08:00
    @agileago 难道不是吗? 这些库, 在国内有几个人用? 你去看看 boss 直聘前端招聘, 有几个需要会这些的?
    agileago
        123
    agileago  
       2022-05-06 18:10:53 +08:00
    @bthulu 你不用不代表你用,据我所知后端 nodejs 新开项目大部分选择 nestjs
    sherryqueen
        124
    sherryqueen  
       2022-05-06 18:12:40 +08:00
    Vite+React+React-router+tailwindcss 基本就这些了
    bthulu
        125
    bthulu  
       2022-05-06 18:17:10 +08:00
    @agileago 前端呢? react 跟前后端八竿子打不着吧
    nzbin
        126
    nzbin  
       2022-05-06 18:24:08 +08:00
    @bthulu js 的装饰器已经进入 stage 3 了
    keyrinrin
        127
    keyrinrin  
       2022-05-06 18:44:36 +08:00
    以前用 react 的优势是可以方便配合 ts ,现在有了 vue3 ,还是跑去 vue 了,很喜欢三合一文件
    LiuJiang
        128
    LiuJiang  
       2022-05-06 21:22:04 +08:00
    我好奇 Vue + JSX + TS 这玩意性能如何,有老哥用过吗
    demonzoo
        129
    demonzoo  
       2022-05-07 01:22:36 +08:00
    @isukkaw zustand 和 swr 真的好用,然后 webpack 我也不用了,改成 parcel 。UI 自己写,不用 antd 一身轻松
    LeslieWongH
        130
    LeslieWongH  
       2022-05-07 03:23:45 +08:00   ❤️ 1
    @Huelse 外网上的 Biran Holt 可以跟的。他的 React 完全入门课程都更新到了第 7 个版本了。 多年笔耕不辍紧磕 React 前沿。https://btholt.github.io/complete-intro-to-react-v7
    dk7952638
        131
    dk7952638  
       2022-05-07 06:46:12 +08:00
    @FightPig tailwindcss+daisyui
    agileago
        132
    agileago  
       2022-05-07 09:03:05 +08:00 via iPhone
    @LiuJiang 都是 vdom ,性能比 react 好点,但没模板高
    v23xowen
        133
    v23xowen  
       2022-05-07 09:32:32 +08:00
    umijs 全家桶
    lujiaosama
        134
    lujiaosama  
       2022-05-07 09:33:25 +08:00   ❤️ 1
    @bthulu nodejs 选手表示装饰器是基操, 啥洪水猛兽. 纯写前端也是能用上场的, aop 用装饰器很常见.
    doommm
        135
    doommm  
       2022-05-07 09:49:46 +08:00 via Android
    进入 stage3 的装饰器提案,并非目前 ts 中使用的装饰器
    daokedao
        136
    daokedao  
       2022-05-07 10:05:57 +08:00
    看上面的趋势图,是不是要学 xstate ?
    uni
        137
    uni  
       2022-05-07 11:28:49 +08:00
    大家都是用 taiwind 的吗,windi 怎么样呀?
    willx12123
        138
    willx12123  
       2022-05-09 16:09:35 +08:00
    语言毫无疑问:TypeScript
    函数还是 class:函数组件
    状态管理:
    1. Redux 全家桶:redux + redux-thunk + reselector + immer
    2. RxJS:rxjs-hooks + rxjs
    magicdawn
        139
    magicdawn  
       2022-05-31 14:53:07 +08:00 via Android
    只有我推荐 easy-peasy
    https://easy-peasy.dev/

    话说 pmndrs 家这么多状态管理,他们自己做个项目不得自己选半天
    yuthelloworld
        140
    yuthelloworld  
    OP
       2022-05-31 15:01:41 +08:00
    @magicdawn #139 我躺平了,懒得选了。直接捡起 redux 一把梭
    magicdawn
        141
    magicdawn  
       2022-06-02 12:31:58 +08:00
    在这里发现了 valtio 挺好用的,
    写了一篇源码解析 https://magicdawn.fun/2022/05/31/valtio-source-guide/
    嘿嘿~
    likunyan
        142
    likunyan  
       2022-09-06 16:34:24 +08:00
    不怕折腾,只用新的不用旧的。
    yuthelloworld
        143
    yuthelloworld  
    OP
       2022-11-03 10:07:39 +08:00
    最近半年都在写 vue3+vite+pinia 。 感觉 pinia 还挺好用的,比较省心。所以 react 的生态里有没有类似 pinia 的?
    dxhuii
        144
    dxhuii  
       2022-12-17 01:56:02 +08:00
    @christin #80
    我们也在用,不过我已经把 dva 干掉了,换成了 valtio , 舒服多了。
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2957 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 00:32 · PVG 08:32 · LAX 17:32 · JFK 20:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.