对于一些复杂的组件,使用面向对象来抽象设计,达到代码的高度复用以及可灵活配置,这些是函数式组件不容易做到的,被放弃有些可惜。
举个例子: 通过抽象设计,以下不到 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 的看法。
![]() | 1 murmur 2024-01-05 11:52:09 +08:00 我挺喜欢 class component 的,无奈 react 的 api 又长又臭,hooks 实际上只是一种编程风格,和类组件并无优劣之分,但是 hooks 夹不住语法简单啊 class component 就是适合传统企业开发,因为生命周期太明确了,就是进入加载数据,渲染表单,提交表单,也不需要做什么优化,组件 的确 加载了 的时候请求数据就可以了 |
![]() | 2 echo0x000001 OP @murmur 不需要考虑优化的场景,的确是 class 更好用,需要优化还是得函数式组件。但是涉及到一些组件或者业务的功能重写定制啥的,感觉函数式组件还是更好用。 |
![]() | 3 Leeeeex PRO class 写 this 太恶心了,现在用 function 不用再写 this 了我很开心。 |
![]() | 4 echo0x000001 OP @chanChristin 用 funtion 能少写 this, 可是用 class 能少写代码啊 |
![]() | 5 IvanLi127 2024-01-06 01:58:33 +08:00 via Android 我感觉复杂的项目或许用 Angular 比较合适。React 的方向感觉比较适合碎点的东西。 这俩框架各占一山头 |
![]() | 6 Mark24 2024-03-29 15:17:03 +08:00 class 挺好的 hook function 的依赖乱七八糟的,觉得很傻 |