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

对 React 印象停留在 2 年前,准备深入一下,向各位请教一下生态

  •  2
     
  •   johnkiller · 2021-09-22 09:33:53 +08:00 · 5420 次点击
    这是一个创建于 1140 天前的主题,其中的信息可能已经有所发展或是发生改变。

    那个时候看的教程一般全都是 class component,状态管理必是 redux,后来重心还是切换到 Vue 去了。

    现在想重学一遍,但对一些教程比较疑惑,写法可能已经过时,又或者过于 beta 。

    所以来这里请教下各位,2021 年,react 的最佳实践。

    1.  现在是 hooks 的天下了吗?
    2.  主流用哪些配套生态呢?
    
    26 条回复    2021-10-28 09:37:12 +08:00
    NSLoger
        1
    NSLoger  
       2021-09-22 09:37:59 +08:00   ❤️ 1
    React 写过一丢丢,目前主攻 RN,新业务主要基本上都是以 functional component 为主,hooks 用起来确实很爽,但是要写出正确的 hooks 的写法需要大量的代码的洗礼。
    theohateonion
        2
    theohateonion  
       2021-09-22 09:39:50 +08:00   ❤️ 1
    1. 主流确实是 hooks,新组件推荐全部用 Functional Component 实现就好了。
    2. 配套生态倒是没有太多变化,redux 也不是不能用,react-router 依旧是主流 router 。新出的一些状态管理库比如 recoil 之类的看兴趣选取即可,应用规模没有大到一定程度的背景下都能用,没差
    3. 非常建议把官方的一些 hooks 好好学习一下,非常关键。
    ospider
        3
    ospider  
       2021-09-22 09:40:12 +08:00   ❤️ 2
    确实是 hooks 的天下了。状态管理耦合着数据请求用 redux 太啰嗦了,我现在用 swr + useReducer 就很好。
    theohateonion
        4
    theohateonion  
       2021-09-22 09:40:42 +08:00   ❤️ 1
    补充一句,99%说 hooks 坑的,写的有心智负担的都是没有好好读官方文档的
    Augi
        5
    Augi  
       2021-09-22 09:45:02 +08:00 via iPhone   ❤️ 1
    hooks 很好,但是你要学会怎么写,不要带着 Class 时期的那套思想就好了
    yaojin
        6
    yaojin  
       2021-09-22 09:47:20 +08:00   ❤️ 1
    可以了解下 react-query, dva redux 不好用,但是国内还是主流
    magichacker
        7
    magichacker  
       2021-09-22 09:57:28 +08:00
    我们现在是 all in hooks 和 Mobx
    magichacker
        8
    magichacker  
       2021-09-22 09:57:49 +08:00   ❤️ 1
    Mobx 让你像写 Vue 一样写 React
    murmur
        9
    murmur  
       2021-09-22 09:58:39 +08:00   ❤️ 1
    一般的项目你应该相信框架,很多时候生命周期就相当于 document.ready,都堆那一起去了

    class 也挺好的,hooks 啥都要考虑变量变化是累

    我们第一个项目,好像 react15 写的,一个 shouldComponentXXX 的优化都没写
    TomVista
        10
    TomVista  
       2021-09-22 10:03:39 +08:00   ❤️ 1
    hooks 不是必需品,如果项目里没有 逻辑复用 ,完全可以不用.
    ipwx
        11
    ipwx  
       2021-09-22 10:19:54 +08:00
    我是用 Vue 的。但是看了 React hooks 我觉得,好像还挺好用,有一种迁移的冲动。

    后来发现 Vue 3 的 hooks 更好用就决定等了。
    robinlovemaggie
        12
    robinlovemaggie  
       2021-09-22 10:33:02 +08:00
    @magichacker #7 hooks /mobx +1
    alalida
        13
    alalida  
       2021-09-22 12:30:38 +08:00
    @ospider 用了 grahpql,直接把状态管理器扔了,开发效率搞得不行,typescript 支持也很好。swr 没用过,看起来和 graphql 在 react 中的用法差不多。

    不明白的是 useReduer,我没搞懂这个 hook 的使用场景。
    alalida
        14
    alalida  
       2021-09-22 12:39:58 +08:00
    @alalida 高得不行,打错了
    SolidZORO
        15
    SolidZORO  
       2021-09-22 12:41:54 +08:00 via iPhone   ❤️ 1
    react-query 配合 axios 完成 99% 的状态管理,还有复杂的(指父子子孙孙嵌套组件),全局的会用 mobx 完成最后 1%。

    另外 hooks 的确有负担,而且不小,我有个项目自己写了 500+ hooks 组件但不敢说自己会用了。主要是黑魔法太多比如用 useRef 全局存状态什么的,要是写不好,组件会出现非常多没必要的 reRender 。

    读官方 hooks 文档用处不是太大,随便看看就行,官方自己也承认没写好目前在重写中,主要还是多写多踩坑吧,写够一定数量的 hooks,就自然学会了。
    gouflv
        16
    gouflv  
       2021-09-22 13:00:35 +08:00 via iPhone
    hooks + provider 解决大部分数据共享,参考 constate
    pddwin
        17
    pddwin  
       2021-09-22 13:42:28 +08:00
    没人用 umi 的吗
    kohoh
        18
    kohoh  
       2021-09-22 13:49:28 +08:00
    @pddwin 我用 umi
    ospider
        19
    ospider  
       2021-09-22 14:12:33 +08:00
    @alalida 前端总还是有一些状态的,比如侧边栏是否打开。这时候还是得用个全局的状态存储,内置的 Context + useReducer 就可以实现。
    Leviathann
        20
    Leviathann  
       2021-09-22 14:21:18 +08:00 via iPhone
    @SolidZORO useRef 感觉跟 class 组件的实例变量差不多
    只是一个是 class,天然的可以管理实例变量, 而函数组件需要 react 帮你管理
    4196
        21
    4196  
       2021-09-22 15:38:43 +08:00
    个人学习体验

    hooks 的心智负担比 vue3 大,官方文档例子太简单,看完还是缩手缩脚的写项目

    对于有洁癖的,会对函数组件重复渲染比较难受,老想找到是哪里导致的

    函数组件和 class 组件两种范式非要混着用心里很不舒服
    Saurichthys
        22
    Saurichthys  
       2021-09-22 15:41:37 +08:00
    @magichacker
    Mobx 让你像写 Vue 一样写 React?
    那为啥不直接写 vue
    OliveGlaze
        23
    OliveGlaze  
       2021-09-22 18:01:41 +08:00   ❤️ 1
    Hooks + Akita 一票
    fernandoxu
        24
    fernandoxu  
       2021-09-23 17:04:07 +08:00
    react 非常保值,除了新增了 Hooks 其它都不过时,redux 结合官方的 redux-toolkit 也很好用了
    lbyo
        25
    lbyo  
       2021-10-09 09:43:41 +08:00
    @SolidZORO #14 不推荐 Axios (直接用 fetch 吧,最近版本的 transform 还出了 bug 修了好久

    状态库的话,Redux 和 MobX 都不流行了,现在流行 Recoil 、Jotai,写就完事了,无所谓踩坑与否
    Shensven
        26
    Shensven  
       2021-10-28 09:37:12 +08:00
    2021 下半年,React Hook 的最佳实践,欢迎来撩
    https://github.com/shensven/Readhubn
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3356 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:51 · PVG 18:51 · LAX 02:51 · JFK 05:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.