formily是个什么东东？--使用感受
作者：互联网
从formily v1的版本使用到formily v2正式版本的使用与开发，有了一点心得体会，分享给大家：
首先来了解下formily是什么：
基于本人的理解，它主要是用于表单场景的使用，antd大家都很清楚，就不多说，formily是一个在antd的基础上二次封装，不需要再写繁重的表单逻辑，直接可通过json格式配置的一个新的ui框架
按照使用antd或element等ui框架的使用习惯，我们通常会这样来定义一个表单：
（图片来自于antd官网）
但基于使用formily的习惯，我们定义一个表单，通过用json的格式配置出一个页面，传入相应的组件名以及使用方法等
（样例本地获取）
将写好的json传入fomily暴露出来的相应方法：
（样例本地获取）
以下为展示效果，基本于antd中form的表单展示效果一样
（图片来自于本地）
基于官网：它能实现的功能有很多，解决很多问题，例如：1.字段数量多，如何让性能不随字段数量增加而变差？2.字段关联逻辑复杂，如何更简单的实现复杂的联动逻辑？字段与字段关联时，如何保证不影响表单性能？3.表单数据管理复杂 4.表单状态管理复杂 5.表单的场景化复用 6.动态渲染述求很强烈 7.如何在表单协议中描述逻辑？等问题。它是阿里数字供应链团队，在经历了大量的中后台实践和探索之后，沉淀出的 Formily 表单解决方案
领域模型：
首先表单联动是非常复杂的，基本上都是基于某些字段的值引发的联动，但是，实际业务需求可能会比较恶心，不仅要基于某些字段值引发联动，还会基于其他副作用值引发联动，用张图片表示：
（图片来自官网）
（field基本模型，图片来自官网）
协议驱动：
为了不污染标准 JSON-Schema 属性，统一以x-*格式来表达扩展属性，通俗来说，我们使用antd的组件的时候，我们希望使用他的属性，我们可以直接按照antd的文档属性直接使用，另外formily现有的控件或者antd现有的控件还不能满足我们的使用要求的时候，我们可以自行封装组件，然后注册进去（怎么自行封装组件以及注册，下次再说），相关属性也可通过"x-component-props"属性去传入
这样看来，UI 协议与数据协议混合在一起，只要有一个统一的扩展约定，也还是能保证两种协议职责单一。
（图片来自官网）
然后，如果想要在某些字段上包裹一个 UI 容器怎么办呢？这里，Formily 定义了一个新的 schema type，叫void，在 JSON Schema 中，引入 void，代表一个虚数据节点，表示该节点并不占用实际数据结构
（图片来自官网）
那么讲到字段联动：
{
"type": "object",
"properties": {
"source": {
"type": "string",
"title": "Source",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
}
},
"target": {
"type": "string",
"title": "Target",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
},
"x-reactions": [
{
"dependencies": ["source"],
"when": "{{$deps[0] == '123'}}",
"fulfill": {
"state": {
"visible": true
}
},
"otherwise": {
"state": {
"visible": false
}
}
}
]
}
}
}
可以在x-reactions中进行相关操作，借助x-reactions描述了 target 字段，依赖了 source 字段的值，如果值为'123'的时候则显示 target 字段，否则隐藏，这种联动方式是一种被动联动，那如果我们希望实现主动联动呢？可以这样：
{
"type": "object",
"properties": {
"source": {
"type": "string",
"title": "Source",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
},
"x-reactions": [
{
"when": "{{$self.value == '123'}}",
"target": "target",
"fulfill": {
"state": {
"visible": true
}
},
"otherwise": {
"state": {
"visible": false
}
}
}
]
},
"target": {
"type": "string",
"title": "Target",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
}
}
}
}
所以，以上表单完全可以使用协议来描述了，不管是再复杂的布局，还是很复杂的联动，都能做到可配置
核心优势：高性能，开箱即用，联动逻辑实现高效，跨端能力，逻辑可跨框架，跨终端复用，动态渲染能力
核心劣势： 学习成本较高，虽然 2.x 已经在大量收敛概念，但还是存在一定的学习成本。
相关使用：
具体使用请上官网细看https://v2.formilyjs.org/zh-CN/guide
欢迎大家学习formily，并且有什么自己的使用想法欢迎一起讨论～
标签：--,东东,component,表单,联动,antd,type,formily 来源： https://www.cnblogs.com/yuxingxingstar/p/15656586.html