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

关于前端 function component 的一点疑问。

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

    我感觉现在前端圈都在往 function component & hooks 的方向发展。

    但是我感觉这玩意写复杂一点的组件、页面的时候好难用。

    我喜欢从上而下的写代码、阅读代码。我会把一个组件的条件渲染分支、handler 函数放在 class component 的后面。这样阅读一个组件的时候,先看 props 、state 定义,然后看下 render 函数,对整个组件的功能就八九不离十了。

    但是如果用 function component 来写,那就必须先把 handler 的定义提前,一打开一个组件,迎面而来的全是细节。条件渲染也不好写,条件一多、嵌套一深就很乱。

    既然这是发展趋势,我就很想问问大家都是 这么把 function component 写得干净一点的?

    5 条回复    2024-03-06 08:27:56 +08:00
    zoeliu
        1
    zoeliu  
       274 天前 via Android
    你也可以直接先看 props ,state 和 return 的 jsx 。 细节逻辑可以按功能抽象成 hook 直接引入减少 comp 的代码量。
    出现你说的一打开全是细节,就是没有把逻辑做好抽象。全部放在了一起。
    条件渲染,简单的条件可以直接在 jsx 里写。如果逻辑多了也最好抽出来 memo 一下再使用。
    fp 和 hooks 就是为了解决一个组件代码量过多,逻辑不好抽象的问题。不过灵活度会高些,会容易出现你说的"不干净的问题"。
    crysislinux
        2
    crysislinux  
       274 天前 via Android
    所以我一向觉得 react 下限是很低的。还好有很多库可以挽救一下。
    sweetcola
        3
    sweetcola  
       274 天前   ❤️ 1
    React 能用 class 也能用 hooks ,但是大部分人都会去拥抱 hooks 的写法就能说明一定问题了,我是 hook 出来的那一开始就把 class 写法抛弃了。

    如果用 hooks 写会觉得很乱,那么用 class 来写会更乱,像 #1 说的做好抽象就行了。
    tsutomu
        4
    tsutomu  
       274 天前
    用 hooks 就不要怕拆组件,在组件的抽象甚至包括命名上有一定经验的时候就会舒服很多
    sjhhjx0122
        5
    sjhhjx0122  
       274 天前
    其实你可以把逻辑放 class,写个 hook 把 class 读出来,就是 state 不好处理
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3614 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:25 · PVG 12:25 · LAX 20:25 · JFK 23:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.