Choerodon UI Pro踩坑实录

引言

Choerodon UI Pro是基于mobx状态管理器封装的UI组件库，集成了DataSet设计模型的低成本前端开发框架

先睹为快，DataSet定义如下：

// DataSet.js
import { DataSet } from 'choerodon-ui/pro';
import SexOptionDataSet from './sexOptionDataSet';
import LanguageOptionDataSet from './languageOptionDataSet';
const sexOptionDataSet = new DataSet(SexOptionDataSet);
const languageOptionDataSet = new DataSet(LanguageOptionDataSet);

const FormDataSet = {
    autoCreate: true,
    fields: [
        { name: 'phone', type: 'string', label: '手机号', pattern: '1[0-9]{10}', required: true },
        { name: 'password', type: 'string', label: '密码', required: true },
        { name: 'confirmPassword', type: 'string', label: '确认密码', required: true, validator: (value, name, record) => {
            // 这个地方能返回的不止有布尔类型和字符串类型，你也可以自己自行写一个 html 标签自定义样式，比如字体颜色改成蓝色
            if (value !== record.get('password')) {
                return '您两次输入的密码不一致，请重新输入';
            }
            return true;
        } },
        { name: 'age', type: 'number', label: '年龄', required: true },
        { name: 'sex', type: 'string', label: '性别', textField: 'text', valueField: 'value', options: sexOptionDataSet, required: true },
        { name: 'language', type: 'string', label: '语言', textField: 'text', valueField: 'value', options: languageOptionDataSet, required: true },
        { name: 'email', type: 'string', label: '邮箱', required: true },
        { name: 'homePage', type: 'string', label: '个人主页', required: true },
        { name: 'birth', type: 'date', label: '生日', required: true },
    ],
    transport: {
        create: ({ data, params, dataSet }) => {
            console.log(data+" ", params+" ", dataSet.toJSONData());
            return ({
                // url: 'v1/projects/${projectId}',
                // method: 'post',
                // data,
            })
        }
    },
    events: {
        load: ({ dataSet }) => {
            console.log('加载完成', dataSet)
        }
    }
};
export default FormDataSet;

一、技能必备

1.如何用数据渲染组件？

属性	作用
dataSet	对象/集合数据集属性
record	行绑定数据集属性
field	字段配置数据集属性

1.1 数据对象绑定

如表单、table等区域性组件

绑定对象
<Component dataSet={new DateSet(XXX)} />

1.2 行数据单一数据绑定

如列表项、表格行、表单可遍历单一项

绑定行数据
<Component record={xxxSet.curent | xxxSet.record} />

1.3 Field

职能

• API接口数据字段map映射
• 字段值校验
• 字段类型声明 （注意：这里的类型并不是数据类型，而是用于和组件对应。如：number => NumberField 组件）

设定Fields
fields: [{
	key1: value2,
	key2: value2,
	...
	keyn: valuen 
},
...]

二、如何发起API请求数据？

Transport

method	作用
read	查询获取数据请求
create	新增数据请求
update	更新数据请求
destory	删除数据请求

三、如何收集数据？

使用dataSet模式，dataSet会自动监听收集数据（基于mobx的观察者模式），无需手动收集，唯一要做的就是触发收集的action

const dataSet = new DataSet(xxxDataSet);
...
dataSet.submit() // 收集并提交数据

submit触发的结果：

• 如果之前无此条数据 => transport.create
• 如果之前有此条数据 => transport.update

四、如何对请求数据预处理？

1.发送前

对 transport.CRUD_method的data参数做修改即可

2.发送后

• event.beforeLoad 预处理数据
• component的renderer method 渲染时自定义修改数据以渲染

五、常见问题

• 1.dataKey 可自定义指定绑定数据源来API response的某个字段
• 2.chirdren + cascadeParams可自动实现级联查询，无需额外获取子查询所需的id
• 3.拆分组件的函数，如果无observer，则可能出现不刷新的bug
• 4.hook 方法有执行顺序，存在多个return语句时，return必须写在hook后面，否则会有react的报错
• 5.useMemo 是性能优化的方法，有一定开销不建议滥用useMemo，一般情况下useEffect足够应对场景
• 6.useStore 遵循react context规范，取最近祖先层的数据

心得：任何低成本设计理念库的成功与否都取决于在是否拥有强大的文档支撑！