formily 三种渲染方式

  1. JsonSchema，json写法，推荐使用
  2. MarkupSchema，JsxSchema，jsx混合 json
  3. Jsx，原生 react写法

jsonSchema协议渲染

JSON Schema 侧重于数据的描述，而非UI的描述，因为表单，输入的就是数据，让用户关心数据，而非UI
动态配置化渲染表单的能力，需要结合设计器，高效的生成各种各样的表单
动态的表单渲染方案：JSON配置中心的各种字段与对应的解析规则
Formily实践 https://zhuanlan.zhihu.com/p/142237587

理解了 Schema 字段的含义，也就理解了所有使用范式

  • 与其自己去设计一套这样的 JSONSchema规范，不如直接按照社区的规范来
  • 配置 JSON来进行描述数据，服务端或客户端遵循一个规范，进行消费

jsx渲染

使用 Field，ArrayField，ObjectField，VoidField 等组件直接编写表单
jsx渲染模式的好处

  1. 组件化思想开发表单
  2. 编辑器有智能提示，体验好
  3. 维护性好于 JSON

SchemaField

SchemaField 子节点不能随意插 UI 组件，因为最终 SchemaField 会解析子节点，并转换为 JSON Schema

  1. <SchemaField.String
  2.   x-component="Input"
  3.   x-component-props={{ placeholder: '请输入' }}
  4. />

Schema协议

https://v1.formilyjs.org/#/0yTeT0/jAU8UVSYI8
image.png

S2V场景驱动视图
建立一套标准方案，使协议通、物料通、能力通，是开箱即用
formily建设方案
https://developer.aliyun.com/article/748028
低代码平台分析 https://segmentfault.com/a/1190000023065734

如何避免字段 name重复

例如，一些自定义组件重复拖拽，导致 name值一样
解决：

  1. 自定义 hooks 查询，所有已经使用过的字段名称，然后再重写渲染组件的单元格，对其 name 进行是否已经使用过的逻辑判断
  2. uuid

image.png后面带单位的
x单位x单位x单位 类型表单
https://antd.formilyjs.org/zh-CN/components/space

文档优先
https://reactive.formilyjs.org/guide/best-practice
formily造的轮子，参考于mobx，做定制化
formily/react核心概念
https://react.formilyjs.org/zh-CN/guide/concepthttps://react.formilyjs.org/guide/concept#三种开发模式)
表单描述Schema协议、表单渲染、表单组件及周边生态一体的统一表单解决方案
Formily则预设了数组、表格、卡片和可拖拽几种方式供我们选择
支持网格布局、分布布局等复杂方式
联动
简单联动、批量联动和循环联动
formily/reactive 状态管理是怎么做的，业务使用中如何优化性能？
属性名 描述
enum使用可编辑的select组件
bool用switch组件提供编辑
schema类型使用json编辑器
form/Field 抽象出Model：管理state（数据及数据操作api）
form指整个表单，field是每个表单元素
https://react.formilyjs.org/zh-CN/api/shared/schema
https://core.formilyjs.org/zh-CN/api/models/field

不同的场景对应的API，不同业务逻辑的组件单独封装组件

  • 不引入新的框架，做到足够轻量
  • schema描述即数据结构及UI层级
  • Schema拆分颗粒度较细，功能描述包括：异步数据源，字段联动 ，表达式，布局描述


联动响应

  • reactions负责处理响应逻辑
  • dependencies ： 负责监听依赖项
  • when: 表示条件
  • fulfill: 表示满足条件后执行的动作
  • state: 表示当前组件的属性
  • value: 代表当前属性的值
  • display: 表示当前属性的显隐
    1. total: {
    2. type: 'number',
    3. title: 'Total',
    4. 'x-decorator': 'FormItem',
    5. 'x-component': 'NumberPicker',
    6. 'x-component-props': {
    7.   addonAfter: '$',
    8. },
    9. 'x-pattern': 'readPretty',
    10. 'x-reactions': {
    11.   dependencies: ['.projects'],
    12.   when: '{{$deps.length > 0}}',
    13.   fulfill: {
    14.     state: {
    15.       value:
    16.         '{{$deps[0].reduce((total,item)=>item.total ? total+item.total : total,0)}}',
    17.     },
    18.   },
    19. },
    20. }