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

react class component 这么好用,为啥要被放弃了

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

    对于一些复杂的组件,使用面向对象来抽象设计,达到代码的高度复用以及可灵活配置,这些是函数式组件不容易做到的,被放弃有些可惜。

    举个例子: 通过抽象设计,以下不到 50 行,且看不到任何 jsx 标签的代码就能实现一个管理模块的增删改查详情功能,附带权限校验。

    import { ModelAdminDisplayListType, ModelAdminTablePage } from '@/core/admin'
    import { DigitField } from '@/core/form/field'
    import { Model } from '@/core/model'
    
    class AppModel extends Model {
        id = Model.InputField({
            label: 'ID'
        })
        account = Model.InputField({
            label: '账户'
        })
        userId = Model.InputField({
            label: '账户 ID',
            widget: new DigitField()
        })
        os = Model.InputField({
            label: '操作系统'
        })
        ipaddr = Model.InputField({
            label: '登录 IP'
        })
        browser = Model.InputField({
            label: '浏览器'
        })
        address = Model.InputField({
            label: '登录地点'
        })
        createAt = Model.InputField({
            label: '登录时间'
        })
    }
    
    export default class App extends ModelAdminTablePage<AppModel> {
    
        moduleKey: string = 'sys:log:login'
        filters: ModelAdminDisplayListType<AppModel> = ['userId']
        listDisplay: ModelAdminDisplayListType<AppModel> = ['id', 'account', 'userId', 'os','ipaddr', 'browser','address', 'createAt']
        detailModalSize: 'small' | 'middle' | 'large' = 'small'
        showAddButton: boolean = false
        showEditButton: boolean = false
    
        getModel(): new () => AppModel {
            return AppModel
        }
    
        apiUrl: string = '/dis-micro-rbac/sys/loginfor'
    }
    
    

    想借此看看大家对于 class component 的看法。

    6 条回复    2024-03-29 15:17:03 +08:00
    murmur
        1
    murmur  
       140 天前
    我挺喜欢 class component 的,无奈 react 的 api 又长又臭,hooks 实际上只是一种编程风格,和类组件并无优劣之分,但是 hooks 夹不住语法简单啊

    class component 就是适合传统企业开发,因为生命周期太明确了,就是进入加载数据,渲染表单,提交表单,也不需要做什么优化,组件 的确 加载了 的时候请求数据就可以了
    echo0x000001
        2
    echo0x000001  
    OP
       140 天前
    @murmur 不需要考虑优化的场景,的确是 class 更好用,需要优化还是得函数式组件。但是涉及到一些组件或者业务的功能重写定制啥的,感觉函数式组件还是更好用。
    chanChristin
        3
    chanChristin  
       140 天前
    class 写 this 太恶心了,现在用 function 不用再写 this 了我很开心。
    echo0x000001
        4
    echo0x000001  
    OP
       140 天前
    @chanChristin 用 funtion 能少写 this, 可是用 class 能少写代码啊
    IvanLi127
        5
    IvanLi127  
       140 天前 via Android
    我感觉复杂的项目或许用 Angular 比较合适。React 的方向感觉比较适合碎点的东西。
    这俩框架各占一山头
    Mark24
        6
    Mark24  
       56 天前
    class 挺好的

    hook function 的依赖乱七八糟的,觉得很傻
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1036 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:16 · PVG 03:16 · LAX 12:16 · JFK 15:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.