Class Component
一种使用typescript的class声明组件的方式。
IWidget类型声明
IWidget是平台内所有组件的统一接口定义，也是一个组件定义的最小集。
/**
* 组件构造器
*/
export type WidgetConstructor<Props extends WidgetProps, Widget extends IWidget<Props>> = Constructor<Widget>;
/**
* 组件属性
*/
export interface WidgetProps {
[key: string]: unknown;
}
/**
* 组件
*/
export interface IWidget<Props extends WidgetProps = WidgetProps> extends DisposableSupported {
/**
* 获取当前组件响应式对象
* @return this
*/
getOperator();
/**
* 组件初始化
* @param props 属性
*/
initialize(props: Props);
/**
* 创建子组件
* @param constructor 子组件构造器
* @param slotName 插槽名称
* @param props 属性
* @param specifiedIndex 插入/替换指定索引的子组件
*/
createWidget<ChildProps extends WidgetProps = WidgetProps>(
constructor: WidgetConstructor<ChildProps, IWidget<ChildProps>>,
slotName?: string,
props?: ChildProps,
specifiedIndex?: number
);
}Widget
Widget是平台实现的类似于Class Component组件抽象基类，定义了包括渲染、生命周期、provider/inject、watch等相关功能。
export abstract class Widget<Props extends WidgetProps = WidgetProps, R = unknown> implements IWidget<Props> {
/**
* 添加事件监听
*
* @param {string} path 监听的路径
* @param {deep?:boolean;immediate?:boolean} options?
*
* @example
*
* @Widget.Watch('formData.name', {deep: true, immediate: true})
* private watchName(name: string) {
* ... todo
* }
*
*/
protected static Watch(path: string, options?: { deep?: boolean; immediate?: boolean });
/**
* 可以用来处理不同widget之间的通讯，当被订阅的时候，会将默认值发送出去
*
* @param {Symbol} name 唯一标示
* @param {unknown} value? 默认值
*
* @example
*
* const identifier = Symbol('example-sub')
*
* * field.ts * // 文件
*
* @Widget.BehaviorSubContext(identifier, {value: '这是默认值'})
* private exampleSub!:WidgetBehaviorSubjection<{value: string}>
*
* onValueChange() {
* this.exampleSub.subject.next({value: '这是新的值'})
* }
*
* * other-field.ts * // 文件
* @Widget.BehaviorSubContext(identifier, {value: '这是默认值'})
* private exampleSub!:WidgetBehaviorSubjection<{value: string}>
*
* mounted() {
* this.exampleSub.subscribe((value) => {
* ...todo
* })
* }
*
*/
protected static BehaviorSubContext(name: Symbol, value?: unknown);
/**
* 与 `BehaviorSubContext` 一样，区别在于第一次不会发射默认值
*
* @param {Symbol} name 唯一标示
* @param {unknown} value? 默认值
*/
protected static SubContext(name: Symbol, value?: unknown);
/**
* 将数据绑定为响应式，并且组件中可以获取该值
*/
protected static Reactive(params?: { displayName?: string; render?: boolean });
/**
* 将方法绑定为能够被组件获取的方法
*/
protected static Method(displayName?: string);
/**
* 获取上级注入的依赖，与 Provide 一起使用
*
* @param {string|Symbol} injectName? 被注入的name，如果不传递，那么取target中的name
*
* @example
*
* * children.ts * // 文件
*
* @Widget.Inject('InjectName')
* private rootData!:
*
* 如果要将该值变为响应式，如果加上Reactive
*
* @Widget.Reactive()
* @Widget.Inject('InjectName')
* private rootData!:;
*/
protected static Inject(injectName?: string | Symbol);
/**
* 获取下级注入的依赖，与 Inject 一起使用
*
* @param {string|Symbol} provideName? 被注入的name，如果不传递，那么取target中的name
*
* @example
*
* * parent.ts * // 文件
*
* @Widget.Provide('ProvideName')
* private rootData!:
*
* 如果要将该值变为响应式，如果加上Reactive
*
* @Widget.Reactive()
* @Widget.Provide('ProvideName')
* private rootData!:;
*/
protected static Provide(provideName?: string | Symbol);
/**
* 通过唯一键获取对应组件
* @param handle 唯一键
*/
public static select(handle: string): Widget | undefined;
public constructor(handle?: string);
/**
* 获取当前组件响应式对象
*/
public getOperator();
/**
* 组件初始化
* @param props 属性
*/
public initialize(props: Props = {} as Props);
/**
* 获取组件唯一键
*/
public getHandle(): string;
/**
* 创建一个widget
*
* @param constructor 对应的widget
* @param name 插槽
* @param config widget中initialize方法接收的参数
* @param specifiedIndex 插入到对应位置的索引
*/
public createWidget<T extends Widget>(
constructor: WidgetConstructor<T['config'], T>,
name?: string,
config?: T['config'],
specifiedIndex?: number
);
/**
* 销毁当前widget
*/
public dispose();
/**
* 获取父widget
*/
public getParent(): Widget | undefined;
/**
* 获取所有的children
*/
public getChildren(): Widget[];
/**
* 组件渲染
* @param args 任意渲染参数
* @return 框架VDom
*/
public abstract render(...args): R;
/**
* beforeCreated 钩子函数
* @protected
*/
protected beforeCreated(): void;
/**
* created 钩子函数
* @protected
*/
protected created(): void;
/**
* beforeMount 钩子函数
* @protected
*/
protected beforeMount(): void;
/**
* mounted 钩子函数
* @protected
*/
protected mounted(): void;
/**
* beforeUpdate 钩子函数
* @protected
*/
protected beforeUpdate(): void;
/**
* updated 钩子函数
* @protected
*/
protected updated(): void;
/**
* activated 钩子函数
* @protected
*/
protected activated(): void;
/**
* deactivated 钩子函数
* @protected
*/
protected deactivated(): void;
/**
* beforeUnmount 钩子函数
* @protected
*/
protected beforeUnmount(): void;
/**
* unmounted 钩子函数
* @protected
*/
protected unmounted(): void;
}Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/29.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
