调研 - 基于 Schema 的动态表单的市场调研 #19
Description
| x-render（form-render） | Formily | ProForm | |
|---|---|---|---|
| 官网 | https://x-render.gitee.io/form-render/ | https://formilyjs.org/ | https://procomponents.ant.design/components/form |
| 开发团队 | 阿里飞猪 | 阿里中台 | 蚂蚁antd团队 |
| 开源协议 | MIT | MIT | MIT |
| Star | 3.6K | 5.7K | 1.7K |
| Downloads | 42k 3.1k/month | 123k 20k/month | 1.2M 198k/month |
| 校验 | 同 antd 的 async-validator支持正则、函数文档：https://github.com/yiminghe/async-validator#type | @formily/validator 校验引擎支持正则、函数文档：https://core.formilyjs.org/api/models/field#fieldvalidator | 同 antd 的 async-validator支持正则、函数文档：https://github.com/yiminghe/async-validator#type |
| 布局 | 提供预置布局覆盖大部分场景，使用更简单。没有类似插槽概念，对特殊的布局没有很好的扩展 | 提供 Grid 栅格容器、Space Flex布局容器、Layout 分区块容器，几乎能够满足各种复杂布局 | 同 antd 布局方式 |
| 联动 | 支持两种方式控制联动逻辑： 1.函数表达式，支持除值、default、rules字段以外的所有字段 2.watch，一种监听的方式控制表单联动，适用于值的联动、复杂表单联动，但是对于自增列表的联动还有些问题： 1.无法动态获取行下标，只能写死 2.无法只修改某一行的schema |
支持两种方式控制联动逻辑： 1.x-reactions方式，类似 x-render 函数表达式，支持除值、default、rules字段以外的所有字段 2.提供全局或者单字段的 Effect，一种监听的方式控制表单联动，适用于值的联动、复杂表单联动有完善的路径系统，支持自增列表的动态联动 |
使用 ，但是不可作为 schema 传入，灵活度较低 |
| 自定义组件 | 要求是要有 value/onChange 这两个 props，用于双向绑定值。 | 需要支持 value/defaultValue/onChange 属性即可快速接入表单。 | 基于antd ，用 Form.Item 包裹后使用 |
| 总结 | 优点：轻量级，语法基本上都是json，心智负担小，上手快 缺点：自增列表联动逻辑支持不好，布局方式基本固定，复杂联动或者个性化布局需要开发自定义组件 |
优点：足够灵活，能够适配超复杂联动场景，支持多种布局方式，功能强大。有比较完善的 designable 支持可视化搭建。https://designable-antd.formilyjs.org 缺点：新引入概念较多，增加使用成本.组件稍重，需引入额外的 @formily/antd 才能较好支持 |
优点：与antd适配好，同一团队开发，没有心智负担 缺点：功能尚未完善，联动逻辑局限性较大 |