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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 357 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

举个例子：通过抽象设计，以下不到 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

357 天前

我挺喜欢 class component 的，无奈 react 的 api 又长又臭，hooks 实际上只是一种编程风格，和类组件并无优劣之分，但是 hooks 夹不住语法简单啊

class component 就是适合传统企业开发，因为生命周期太明确了，就是进入加载数据，渲染表单，提交表单，也不需要做什么优化，组件的确加载了的时候请求数据就可以了