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

一准备重新学 react,又选择困难症了

  •  1
     
  •   elone · 2021-04-26 02:58:15 +08:00 · 5797 次点击
    这是一个创建于 472 天前的主题,其中的信息可能已经有所发展或是发生改变。

    两三年前写过 react,那时还没有 hooks 。后来一直写 Angular 了。

    这么长时间过去,对 hooks 比较好奇,想重新学一下,然后又选择困难症了,请指教一下

    1 、 现在的状态管理最普遍的是选择什么? redux 、mobx 、recoil 或者其它 ? redux 学过,感觉写起来好麻烦 ,mobx 好很多,recoil 是最近搜索知道的,没有接触过。

    2 、各种表单组件、UI 组件有什么推荐吗? 不是写管理后台的应用。

    3 、项目框架有什么最佳实践吗?因为 react 比较灵活,自己等下又整乱了。

    36 条回复    2021-05-01 14:12:21 +08:00
    dcoder
        1
    dcoder  
       2021-04-26 04:55:08 +08:00
    同问
    dartabe
        2
    dartabe  
       2021-04-26 05:06:42 +08:00
    mobx 有 redux 那么好的 debug 工具吗?
    ericls
        3
    ericls  
       2021-04-26 05:15:50 +08:00
    你先要知道自己需要解决什么问题 然后再去找解决方案
    xstmjh
        4
    xstmjh  
       2021-04-26 06:08:07 +08:00   ❤️ 3
    1. 现在大部分的 redux 的场景都可以被 hook, react-query 覆盖了,基本不需要用到 state managment 。真的需要的话 context 和 recoil 都不错
    2. 表单:React Hook Form,UI 各花入各眼,material, ant, tailwind 都不错
    3. react 没有大一统的最佳实践,但遵循函数式编程 + Composition over Inheritance, 基本不会差的很远。选自己项目组喜欢的组织方式就好了
    Mutoo
        5
    Mutoo  
       2021-04-26 06:27:30 +08:00 via iPhone
    可以用 redux toolkits,简化了很多。
    beginor
        6
    beginor  
       2021-04-26 06:52:46 +08:00 via Android
    既然会 angular,状态用 rxjs 也是挺不错的
    shzx1994529
        7
    shzx1994529  
       2021-04-26 07:58:30 +08:00
    @xstmjh
    xinhaiw
        8
    xinhaiw  
       2021-04-26 08:12:24 +08:00
    Context 代替不了 Redux
    Cbdy
        9
    Cbdy  
       2021-04-26 08:19:18 +08:00 via Android
    我用 Redux
    jielong
        10
    jielong  
       2021-04-26 09:05:14 +08:00
    想问一下,状态管理大家都用来存储什么数据?
    每个页面都是单独请求数据的话好像没有什么需要全局管理的,Context 设计之初就是保存 theme language 这样不怎么变化的数据。
    除非是个人项目依赖本地存储,需要在多个页面处理同个数据的时候我才能想到用状态管理。
    guoliim
        11
    guoliim  
       2021-04-26 09:05:23 +08:00
    react-query & xstate
    Loserzhu
        12
    Loserzhu  
       2021-04-26 09:31:18 +08:00
    同 react-query + hook 。基本上覆盖了异步数据的管理。
    Ansen
        13
    Ansen  
       2021-04-26 09:41:36 +08:00
    不看你说,我都忘记 React 怎么写了
    LiuJiang
        14
    LiuJiang  
       2021-04-26 09:43:02 +08:00
    推荐 Mobx,我司现在用起来非常爽。
    grewer
        15
    grewer  
       2021-04-26 09:48:52 +08:00
    1. 状态用 redux 还行, 不过论简洁易用确实是 mobx
    2. 表单, 若果是 hooks 我推荐使用 react-hook-form, ui 组件我只用过 antd
    3. 最佳还是需要看框架的搭配的, 就像 1,2 里面不一样, 就会有很多代码不一样, 最好自己摸索下, 但是也可以参考 github 上的
    meloncc
        16
    meloncc  
       2021-04-26 09:54:41 +08:00
    建议阿里 umi 一套
    ch2
        17
    ch2  
       2021-04-26 10:13:29 +08:00
    mobx 是最简单的,umi 太麻烦了
    magichacker
        18
    magichacker  
       2021-04-26 10:20:45 +08:00
    直接 Umi+dva 一把梭,短平快
    liminghui168
        19
    liminghui168  
       2021-04-26 10:44:54 +08:00
    直接 umi + dva + antd + ts
    namelosw
        20
    namelosw  
       2021-04-26 10:47:18 +08:00
    用过 ng 直接推荐 mobx
    drinkjs
        21
    drinkjs  
       2021-04-26 11:31:57 +08:00
    纯 redux,dva,mobx 都用过,个人感觉 mobx 更好用,redux 获取数据:dispatch({type:"User/getList"}), mobx 获取数据:userStore.getList(),原生的 redux 极度难用,所以有了 dva 封了一层,那怕封了一层也没 mobx 用的方便,一堆 call,put,select 烦死
    forsigner
        22
    forsigner  
       2021-04-26 11:35:02 +08:00
    上面很多推荐 react-query 管理异步数据,很赞同这个,我们团队很早就这么干了,很爽,不过我们内部很早自研了类似的东西,至于状态管理,如果用了类似 react-query 的东西,需要额外的处理的状态就很少了,不建议再用 redux 、mobx 、recoil 等复杂的方案,可以使用类似这样简单的方案: https://github.com/forsigner/stook
    forsigner
        23
    forsigner  
       2021-04-26 11:35:48 +08:00
    至于怎么写样式,当然强烈建议使用: https://fower.vercel.app/
    anjianshi
        24
    anjianshi  
       2021-04-26 15:17:56 +08:00
    其实哪个都行。mobx 、redux 、rxjs 都能实现一样的功能。mobx 用起来简单点,可以先用这个上手
    lokya
        25
    lokya  
       2021-04-26 15:42:59 +08:00
    mobx redux 推荐都掌握以下,hooks 推荐学习
    catcn
        26
    catcn  
       2021-04-26 15:46:39 +08:00
    懒得学这么多,直接撸了 ant.design, antpro 那套太繁琐了。
    现在就是 ant.design 的皮,获取数据 axios,直接 React setState,怎么简单怎么搞。
    JerryY
        27
    JerryY  
       2021-04-26 16:05:19 +08:00
    试一下 @vue/reactivity [狗头
    whincwu
        28
    whincwu  
       2021-04-26 16:40:10 +08:00 via Android
    1. 状态管理从生态和周边工具角度,redux 依然是主流,原生写起来麻烦,可以试试 redux-toolkit 、remacth 、dva 等基于 redux 的二次封装
    2. UI 这块如果是 PC 端推荐 antd,移动端最近两年未关注,如果是多端推荐 material-design
    3. 框架上,我一般是脚手架 creat-react-app 加自己处理,更高层次的封装可以试试 umi 这类
    luoyukun
        29
    luoyukun  
       2021-04-26 17:11:37 +08:00
    waltcow
        30
    waltcow  
       2021-04-26 17:28:52 +08:00
    1. react-query + context-api
    2. antd
    3. antd-pro
    waltcow
        31
    waltcow  
       2021-04-26 17:30:21 +08:00
    获取数据 axios,后端如果用的 swagger 的话,
    可以用 openapi-generator, 生成 ts 类型,和 axios 请求的代码
    https://github.com/OpenAPITools/openapi-generator/blob/master/docs/generators/typescript-axios.md
    huijiewei
        32
    huijiewei  
       2021-04-26 23:36:16 +08:00
    react hooks + context + swr + axios + react-router + chakra-ui + react-hook+form

    https://github.com/huijiewei/agile-react

    基本可以搞定所有

    就是很多组件要自己慢慢写

    PS: props 的 API 设计真的需要打磨
    anoninz
        33
    anoninz  
       2021-04-27 01:47:59 +08:00
    来试试 mobx-state-tree + normalizr
    tousfun
        34
    tousfun  
       2021-04-27 16:00:28 +08:00
    @forsigner 大佬在哪个公司?
    forsigner
        35
    forsigner  
       2021-04-27 16:41:32 +08:00
    @919615766 养老公司,金山
    kasper4649
        36
    kasper4649  
       2021-05-01 14:12:21 +08:00
    React 生态特点就是百花齐放,想用啥就用啥。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2403 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 15:46 · PVG 23:46 · LAX 08:46 · JFK 11:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.