标签：-- 东东 component 表单 联动 antd type 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。