前言

Formily是阿里开源的动态化表单的解决方案，优雅的解决了多种复杂场景的表单的数据、状态管理及夸表单通信问题，同时规避了全量渲染的弊端，性能优越。刚好满足我近期工作中的业务需求，啃了将近一周的文档，对Family有了初步的了解，后续使用起来有时间再出翻坑指南。

初步了解

Formily基于MVVM的设计原则，常用的基础核心库有@formily/core、@formily/react、@formily/vue、@formily/antd，支持react和vue，同时支持Markup Schema、 JSX以及现在业界最流行的JSON Schema的写法。

Formily 分为了内核层，UI 桥接层，扩展组件层，和配置应用层，如下图。
内核层是 UI 无关的，它保证了用户管理的逻辑和状态是不耦合任何一个框架。
JSON Schema 独立存在，给 UI 桥接层消费，保证了协议驱动在不同 UI 框架下的绝对一致性，不需要重复实现协议解析逻辑。
扩展组件层，提供一系列表单场景化组件，保证用户开箱即用。无需花大量时间做二次开发。
image.png

核心优势

  • 高性能
  • 开箱即用
  • 联动逻辑实现高效
  • 跨端能力，逻辑可跨框架，跨终端复用
  • 动态渲染能力

核心劣势：学习成本较高，需引多个包，包体积较大。

确实Formily的学习成本还是相对较高的，几大核心库一堆的文档和API会让你眼花缭乱，但是既然要学就要耐下心来，思路理清之后就轻车熟路了。

核心库介绍：
@formily/core：ViewModel层，负责管理表单的状态，表单校验，联动等等。
@formily/react： Model层，作为UI 库来接入内核数据，用来实现最终的表单交互效果，对于不同框架的用户，使用有不同的桥接库，这里使用react为例，使用vue安装@formily/vue。
@formily/antd：View层，在Ant Design基础之上封装的开箱即用的组件库。

使用准备

安装依赖，这里以React+Antd为例

使用yarn
yarn add @formily/core
yarn add @formily/react
yarn add antd moment @formily/antd

or使用npm
npm install --save @formily/core
npm install --save @formily/react
npm install --save antd moment @formily/antd

导入依赖：

  1. import React from 'react'
  2. import { createForm } from '@formily/core'
  3. import { FormProvider, Field } from '@formily/react'
  4. import { FormItem, Input } from '@formily/antd'

实例

以JSON Schema写法为例：

  1. import React from 'react';
  2. import { createForm } from '@formily/core';
  3. import { createSchemaField, FormConsumer, FormProvider } from '@formily/react';
  4. import { FormItem, Input, Password, Submit, FormLayout, FormButtonGroup } from '@formily/antd';
  5. import * as ICONS from '@ant-design/icons';
  7. //用来创建表单核心领域模型，它是作为MVVM设计模式的标准 ViewModel
  8. const form = createForm();
  10. // 创建一个 SchemaField 组件用于解析JSON-Schema动态渲染表单的组件
  11. const SchemaField = createSchemaField({
  12.   // 组件列表
  13.   components: {
  14.     FormLayout,
  15.     FormItem,
  16.     Input,
  17.     Password,
  18.   },
  19.   // 全局作用域，用于实现协议表达式变量注入
  20.   scope: {
  21.     icon(name: string) {
  22.       return React.createElement(ICONS[name]);
  23.     },
  24.   },
  25. });
  27. /**初始化一份json schema
  28.  * 解析 json-schema 的能力；将 json-schema 转换成 Field Model 的能力；编译 json-schema 表达式的能力
  29.  **/
  30. const schema = {
  31.   // schema type
  32.   type: 'object',
  33.   properties: {
  34.     layout: {
  35.       type: 'void',
  36.       'x-component': 'FormLayout',
  37.       'x-component-props': {
  38.         labelCol: 2,
  39.         wrapperCol: 6,
  40.         labelAlign: 'right',
  41.         // layout: 'vertical',
  42.       },
  43.       // 属性描述
  44.       properties: {
  45.         username: {
  46.           // schema type
  47.           type: 'string',
  48.           // 标题
  49.           title: '用户名',
  50.           // 必填
  51.           required: true,
  52.           // 字段 UI 包装器组件
  53.           'x-decorator': 'FormItem',
  54.           // 字段 UI 组件
  55.           'x-component': 'Input',
  56.           // 字段 UI 组件属性
  57.           'x-component-props': {
  58.             prefix: "{{icon('UserOutlined')}}",
  59.           },
  60.         },
  61.         password: {
  62.           type: 'string',
  63.           title: '密码',
  64.           required: true,
  65.           'x-decorator': 'FormItem',
  66.           'x-decorator-props': {
  67.             addonAfter: '强度高',
  68.           },
  69.           'x-component': 'Password',
  70.           'x-component-props': {
  71.             prefix: "{{icon('LockOutlined')}}",
  72.           },
  73.         },
  74.       },
  75.     },
  76.   },
  77. };
  79. export default () => {
  80.   return (
  81.     <FormProvider form={form}>
  82.       <FormLayout layout="vertical">
  83.         <SchemaField schema={schema} />
  84.       </FormLayout>
  85.       <FormButtonGroup>
  86.         <Submit onSubmit={console.log}>提交</Submit>
  87.       </FormButtonGroup>
  88.       <FormConsumer>
  89.         {() => (
  90.           <div
  91.             style={{
  92.               width: 340,
  93.               marginTop: 20,
  94.               padding: 5,
  95.               border: '1px dashed #666',
  96.             }}
  97.           >
  98.             实时响应-用户名：{form.values.username}
  99.           </div>
  100.         )}
  101.       </FormConsumer>
  102.     </FormProvider>
  103.   );
  104. };

1638349667(1).png

  • FormProvider组件是作为视图层桥接表单模型的入口，它只有一个参数，就是接收 createForm创建出来的 Form实例，并将 Form实例以上下文形式传递到子组件中。
  • FormLayout组件是用来批量控制FormItem样式的组件，这里我们指定布局为水平布局，也就是标签在左，组件在右。
  • FormConsumer组件是作为响应式模型的响应器而存在，它核心是一个render props模式，在作为 children的回调函数中，会自动收集所有依赖，如果依赖发生变化，则会重新渲染，借助 FormConsumer我们可以很方便的实现各种计算汇总的需求。
  • FormButtonGroup组件作为表单按钮组容器而存在，主要负责按钮的布局。
  • Submit组件作为表单提交的动作触发器而存在，其实我们也可以直接使用 form.submit方法进行提交，但是使用 Submit的好处是不需要每次都在 Button组件上写 onClick事件处理器，同时它还处理了 Form的 loading状态，如果 onSubmit方法返回一个 Promise，且 Promise正在 pending状态，那么按钮会自动进入 loading状态。


注意：使用前还需要了解，Formily已经完全放弃对IE的兼容，如需兼容IE，慎用！！！

参考

Formily官方文档