@byted-apaas/runtime-react

概述

给组件开发者提供标准化的运行时 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;
}