对于一些复杂的组件,使用面向对象来抽象设计,达到代码的高度复用以及可灵活配置,这些是函数式组件不容易做到的,被放弃有些可惜。
举个例子: 通过抽象设计,以下不到 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 的看法。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.