@byted-apaas/runtime-react
v1.5.0
Published
给组件开发者提供标准化的运行时 SDK API,目前的能力范围主要包含:
Downloads
37
Keywords
Readme
概述
给组件开发者提供标准化的运行时 SDK API,目前的能力范围主要包含:
- 基于视图模型的方式,支撑组件之间相互消费
详细参考:https://ae.feishu.cn/hc/zh-CN/articles/353952071417?from=from_parent_docs#lineguid-2KyZM
用法
model.ts
import { ViewModel } from '@byted-apaas/runtime-react';
import { IDemoProps } from './type';
export default class DemoModel extends ViewModel<IDemoProps> {
public data = {
displayText: this.props.initialDisplayText,
clickCount: 0,
};
public updateDisplayText = (): void => {
this.updateData('clickCount', this.data.clickCount + 1);
this.updateData(
'displayText',
`display text is updated ${this.data.clickCount} ${
this.data.clickCount > 1 ? 'times' : 'time'
}`,
);
};
}
type.ts
export interface IDemoProps {
title: string;
initialDisplayText: string;
}
index.ts
import { FC } from 'React';
import { Button } from '@universe-design/react';
import { useModel, observer } from '@byted-apaas/runtime-react';
import DemoModel from './model';
import { IDemoProps } from './type';
const Demo: FC<IDemoProps> = ({ title }) => {
const { data, updateDisplayText } = useModel<DemoModel>();
return (
<div className="demo">
<div className="demo-title">{title}</div>
<div className="demo-description">{data.displayText}</div>
<Button className="mr12" onClick={() => updateDisplayText()}>
click to change display text
</Button>
</div>
);
};
export default observer(Demo);
接口描述
ViewModel
描述
用于定义【视图模型】的基类
类型
type EmptyRecord = {
[key: string]: any;
};
class ViewModel<Props = EmptyRecord> {
//组件属性
props: Props;
//组件状态
data: EmptyRecord;
//更新组件状态方法
updateData<K, T = K extends keyof Data ? Data[K] : unknown>(
key: K,
value: T,
): void;
}
useModel
描述
使用组件定义的【视图模型】的 React Hook
类型
interface useModel<Model extends ViewModel> {
(): Model;
}
###observer
描述
如果使用了 useModel 来消费视图模型中的响应式属性,对 React 组件需要使用 observer 包装一次,这样才能做到基于数据变化自动渲染
类型
interface observer<Component extends React.FC> {
(component: Component): Component;
}