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

2022 年,学习 React 还需要学 class component 吗?

  •  
  •   jaywhen · 2022-02-13 00:26:11 +08:00 · 4168 次点击
    这是一个创建于 1034 天前的主题,其中的信息可能已经有所发展或是发生改变。

    迫于感觉考研失败,最近在准备春招,之前写 React demo 都是用的 Hooks ,没有了解过类式组件。想问问老哥们工作中类式组件用得多吗,面试会问到这方面的内容吗?

    22 条回复    2022-06-23 10:52:55 +08:00
    Puteulanus
        1
    Puteulanus  
       2022-02-13 00:39:50 +08:00   ❤️ 1
    工作中还是不少吧,很多时候都是维护老代码,会还是得会的
    karott7
        2
    karott7  
       2022-02-13 00:40:49 +08:00 via iPhone   ❤️ 1
    基本上是不写了,不过可以偶尔写写或者看些文章了解下区别
    geist
        3
    geist  
       2022-02-13 06:06:30 +08:00   ❤️ 1
    要的,还是有一些使用场景:

    1. Error Boundaries 没有一个 FC 的接口,如果你需要定义还是要嵌套 Class Component 。(你可以用 FC 去嵌套包裹实现它,但有多个错误边界需要处理时,Class 仍旧是最好的方案。)
    2. 当你需要对外扩展一个继承组件接口时,Class 能够帮助更好的提供对外的接口定义。FC 一般会使用组合、HOC 等方式。当你需要编写库、抽象逻辑时,很可能两种都需要兼容 (组合与继承)。
    3. 维护过时代码时。一些旧的代码库本身就是 Class 实现,或是代码本身引用了一些只兼容 Class 的第三方依赖。如第三方库中对组件使用了 `Component.prototype.render` 的判断;第三方库依赖了 IoC 模式等,这会约束你只能写 Class Component 。
    jaywhen
        4
    jaywhen  
    OP
       2022-02-13 10:42:30 +08:00
    @Puteulanus
    @karott7
    @geist

    #1 #2 #3

    明白了,感谢!
    ch2
        5
    ch2  
       2022-02-13 11:05:32 +08:00 via iPhone   ❤️ 1
    老代码你不用吗?不是所有的组件都是 function
    meteor957
        6
    meteor957  
       2022-02-13 12:43:24 +08:00   ❤️ 1
    izoabr
        7
    izoabr  
       2022-02-13 12:51:38 +08:00   ❤️ 1
    component 学习成本很低啊,基本没啥门槛吧,把生命周期了解一下,然后就是照猫画虎直接用了
    AyaseEri
        8
    AyaseEri  
       2022-02-13 13:02:19 +08:00   ❤️ 1
    不怎么用,但有的场景 class component 比 functional component 好写一些
    siteshen
        9
    siteshen  
       2022-02-13 14:37:44 +08:00   ❤️ 1
    我觉得 Hooks 就是个异类,纯粹是为了解决 FC 不支持状态的问题而生的。如果需要用状态,为什么不用 class component ,而要用 FC 呢?

    ps:本人后端开发,偶尔兼职前端,可能有些理解不到位。
    molvqingtai
        10
    molvqingtai  
       2022-02-13 14:48:20 +08:00 via Android   ❤️ 1
    @siteshen hooks 是为了逻辑复用,当然 class extend or minxs 也行,没有 hooks 灵活
    siteshen
        11
    siteshen  
       2022-02-13 15:47:39 +08:00   ❤️ 1
    @molvqingtai 可能是因为工作经历的差异吧,我觉得 class mixins 是更好的复用方式(我后端用 Django 比较多,出于复用的考虑,几乎没写过 functional view ,都是 class-based view )。



    `Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.`

    在我看来,useState 是引入了一个全局的外部变量,然后通过某种特殊的方式和函数调用返回的组件关联(这句话里 other React features 接触太少,不作评论)。个人是非常厌恶全局变量的,即使是个隐式的全局变量。同理,能放在 state 的,我也不会用 redux (也是个大型的全局变量)存。
    gengchun
        12
    gengchun  
       2022-02-13 17:11:18 +08:00   ❤️ 1
    点进来发现是找工作的,……

    不过虽然点进来了,还是说两句。国内现在 vue.js 肯定是比 react 的多的。如果是 React 的话,说明初始技术栈,就是 2015 年的样子构建的。那么按理,入坑 React 肯定得维护老项目。

    我自己当时有个小项目,当时前端是自己硬着头皮用 React 实现的,搞完一年后发现没有人接盘……后面因为自己也不是真的前端就没有跟进 React 了。所以维护就一直放在低功耗状态,不想再升级了。
    inhal
        13
    inhal  
       2022-02-13 23:30:52 +08:00 via Android   ❤️ 1
    看公司,初创型没有历史负担意味着可以 Hook 梭哈,比如我现在公司才两年,都是 FC
    CodingNaux
        14
    CodingNaux  
       2022-02-14 10:20:56 +08:00   ❤️ 1
    hook 优先,class component 学习下也废不了多少时间.
    主要就是个生命周期吧,https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
    fernandoxu
        15
    fernandoxu  
       2022-02-14 10:34:00 +08:00
    老哥头像从哪里弄的?
    jaywhen
        16
    jaywhen  
    OP
       2022-02-14 10:43:46 +08:00 via iPhone
    @fernandoxu 某宝找画师画的,国外也有画 notion style 头像的服务,只不过贵几倍😄
    magicdawn
        17
    magicdawn  
       2022-02-14 15:49:41 +08:00 via Android   ❤️ 1
    个人愚见
    class component 优点: 简单,直接
    functional component 优点: 易组合,易于逻辑代码复用

    并不一定要完全摒弃 class component. 有时候简单的 class implementation 比你费尽心思 useMemo useCallback React.memo 写出来的性能更好
    fernandoxu
        18
    fernandoxu  
       2022-02-14 16:06:48 +08:00
    @jaywhen #16 刚买了个 20 刀😭,没想到去某宝......
    jaywhen
        19
    jaywhen  
    OP
       2022-02-14 16:13:47 +08:00 via iPhone
    @fernandoxu 😄我就是觉得 20 刀贵了就在某宝 9RMB 买的
    fernandoxu
        20
    fernandoxu  
       2022-02-14 16:21:26 +08:00
    @jaywhen #19 😥😥😥😥😥亏死了
    zooeymango
        21
    zooeymango  
       2022-02-14 17:16:40 +08:00   ❤️ 1
    稍微看一下就可以了,看得懂就行
    prayx
        22
    prayx  
       2022-06-23 10:52:55 +08:00
    @siteshen class mixins 最大的问题在于命名冲突。其次,由于 JS 不支持多重继承,在处理多个代码逻辑复用时需要多重继承,实现起来非常臃肿和繁杂。而 hooks 的出现则是基于 [组合优于继承] 的理念,使用起来十分优雅。

    你说你十分厌恶全局变量,但是 Hooks 全局变量的细节都被 React 隐藏起来了,实际上 hooks 实现是通过 JS 闭包,并不少挂载在 window 上的全局变量,在编码过程实际上没有什么思想上的负担。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1351 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:16 · PVG 01:16 · LAX 09:16 · JFK 12:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.