一准备重新学 react,又选择困难症了 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
elone
V2EX    React

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

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

    两三年前写过 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     Solana     3214 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 35ms UTC 11:38 PVG 19:38 LAX 03:38 JFK 06:38
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86