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

请教下各位 React 的函数组件比类组件好在哪里?

  •  
  •   weeshin · 52 天前 · 1741 次点击
    这是一个创建于 52 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正在学习中,感觉两种方式写起来是差不多的?😂 在实际工况中这两种写法差距很大吗?

    24 条回复    2021-10-15 19:00:58 +08:00
    zhigewuwang
        1
    zhigewuwang  
       52 天前
    函数组件 是指 hook 写法吗?
    复杂的逻辑我喜欢用类组件,更好管理。 简单的就用 hook 写法。少敲些代码
    ReferenceE
        2
    ReferenceE  
       52 天前 via Android
    建议还是用纯函数作为组件
    React 官方写过:
    1.函数可以直接等级提升,类不会等级提升(大概是会把定义放到最开头)
    2.类的函数分了三类 挂载前,更新时,unmount 后
    函数用的是 useEffect 一系,功能一样,写法不同
    xinhaiw
        3
    xinhaiw  
       52 天前
    类就是原罪知道吗。
    wobuhuicode
        4
    wobuhuicode  
       52 天前 via iPhone
    要理解 hook,首先要理解 react 团队对于 ui 的定义
    ui = fn(state)
    很纯粹的一个概念。早期由于在纯函数下没有很好的方案去存储状态。所以才用比较普遍的 class 写法。
    JerryCha
        5
    JerryCha  
       52 天前
    JS 的类容易陷入坑里,能少用还是少用
    aikilan
        6
    aikilan  
       52 天前   ❤️ 1
    类组件 函数组件都写过完整的项目,没啥太大区别,HOOKS 写法的好处是可以把组件细化到很小,HOOKS 封装的好可以省不少工作,而且可以用 useContext 、useReducer 一类的来管理全局变量,省不少事儿。

    类的话生命周期比较清晰,一般来说不会犯什么大错误。比如 HOOKS 要判断更新需要自己去管理 dep 一类的,当然一个熟练的工人,这些都是小事儿。
    zhouyg
        7
    zhouyg  
       52 天前
    简单,逻辑清晰
    rodrick
        8
    rodrick  
       52 天前
    写起来舒服点吧 this 的坑也不会有
    HXHL
        9
    HXHL  
       52 天前 via iPhone
    代码少,写的舒服。
    kidlj
        10
    kidlj  
       52 天前
    Who is this?
    tonytonychopper
        11
    tonytonychopper  
       52 天前
    类组件有个好处就是不容易犯错,各种生命周期把你安排得明明白白
    Robertwhite
        12
    Robertwhite  
       52 天前
    自定义 hooks 用来复用 /分离逻辑,还是很爽的,用类的话好像高阶组件、render props 这些方式都不太优雅
    pigspy
        13
    pigspy  
       52 天前
    我写的应用不太复杂,先用类组件写了一遍,然后重构成函数组件,感觉区别不大
    yl20181003
        14
    yl20181003  
       52 天前
    不用写 render 🙊
    copper20
        15
    copper20  
       52 天前
    简而言之,更帅,更优雅
    ryougifujino
        16
    ryougifujino  
       52 天前
    函数式组件样板代码比类要少
    lisongeee
        17
    lisongeee  
       52 天前
    组件有时候会不可避免地存在多个小功能。类的写法会导致 这些小功能管理起来很混乱,而且互相之间没有作用域隔离,代码很多的时候你需要在多个生命周期函数之间来回跳转。hook/composition-api/ 可以让这些小功能更加内聚,便于管理。

    aHR0cHM6Ly92My5jbi52dWVqcy5vcmcvZ3VpZGUvY29tcG9zaXRpb24tYXBpLWludHJvZHVjdGlvbi5odG1sIyVFNCVCQiU4MCVFNCVCOSU4OCVFNiU5OCVBRiVFNyVCQiU4NCVFNSU5MCU4OCVFNSVCQyU4Ri1hcGk=
    shabbyin
        18
    shabbyin  
       52 天前
    19 年在团队内部分享的时候我说过一个我自己的观点
    > Hooks 组件的目标并不是取代类组件,而是增加函数式组件的使用率,明确通用工具函数与业务工具函数的边界,鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。
    对普通组件来说用类和 class 写起来完全没有任何区别

    但是 hook 好的一点在于 可以有自己内部的状态 可以自己获取 redux 的数据去做处理
    那么就不需要我们自己写一个 util 然后往里面传一堆参数来复用同一套业务逻辑了
    更不用说 hook 还能做 memo 自定义事件挂载卸载可以在一个 useEffect 里完成这些东西
    而 hook 只能用在函数组件中 所以那就开始用呗
    毕竟函数式编程也是流行趋势
    huai
        19
    huai  
       52 天前
    1.不需要理解 this , 虽然也不是很复杂,就几个规则记住即可

    2.在调试的时候, 函数组件,没有那么多嵌套(我基本不调试,对我没差
    lanten
        20
    lanten  
       51 天前
    @ReferenceE 只有用 function 关键字才会提升吧?在用 TS 的情况下,似乎只能用箭头函数的方式赋予 React.FC 泛型,还有 React.memo,也不能用 function 关键字声明。

    函数式组件每一次 rerender 都会执行函数体内的所有代码,需要通过 useEffect 和 useCallback 优化,增加了开发者的心智负担,尤其对于新手而言更容易写出低性能代码。

    函数式组件还不能被继承,我认为函数式组件除了 hooks 复用一无是处
    lanten
        21
    lanten  
       51 天前
    @Robertwhite 考虑一下把高阶组件换成修饰器,需要复用的东西采用抽象派生,那才叫优雅
    danytdlemon1900
        22
    danytdlemon1900  
       51 天前
    @lanten 很难不赞同❤
    biguokang
        23
    biguokang  
       50 天前
    以前没有 hook 的时候,类组件的抽象能力高,复用性强,组装起来灵活(虽然使用起来很繁琐,比如高阶组件看的脑壳疼),所以不得不用类组件

    现在有了 hook,就可以使用函数组件
    ReferenceE
        24
    ReferenceE  
       48 天前 via Android
    @lanten 各有各的看法吧,上家的规范就是要求全部 function
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2977 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:21 · PVG 18:21 · LAX 02:21 · JFK 05:21
    ♥ Do have faith in what you're doing.