中后台表单开发

[whinc]

formily

formily 具备高性能、支持复杂联动、跨框架特点。

• 联动逻辑 包括主动和被动联动，每种又可细分一对一和一对多等情况

阅读材料：

• @formily/reactive 文档
• mobx 文档
• mobx源码解析
• mobx 源码解读（一）：从零到 observable 一个 object 如何
• mobx 源码解读（二）：都 observe object 了，其他类型还会远吗
• mobx 源码解读（三）：mobx 中的依赖收集：订阅-发布模式
• mobx 源码解读（四）：讲讲 autorun 和 reaction
• mobx 源码解读（五）：如虎添翼的 mobx-react
• mobx源码分析（一） 构造响应式数据
• mobx源码分析（二） 订阅响应式数据

[whinc]

浅谈表单开发效率

做过好几个中后台，其中大部分工作量都在做CRUD，对应前端就是表单和表格了，提高这两者的开发效率就能提高整体效率。这类系统一般会基于某个组件库开始，例如 ant-design，它提供了丰富的表单组件和表格组件，通过组合使用能解决绝大部分场景的开发需求。

开发一段时间后，会发现每个表单和表格都有一些相似逻辑（如检验、搜索、过滤等），为了避免每次都从新写一遍，会考虑将 antd 组件封装后供使用。其他系统的前端看到封装后的组件比直接使用 antd 省事不少，也想使用下，这时需要将封装的组件中跨系统通用的部分抽离出来，这个工作也已经有人做了，它就是 pro-components

开发表单的效率提高了，但还是要自己写代码，而且工作量是跟表单数量成比例的。表单无非是组合表单组件，只要表单组件足够丰富就能组合出想要的表单，如果能让其他同学设计表单，而我开发基础的表单组件，那么我的工作量只跟表单组件的数量成正比，而这个量增长是比较缓慢的。

为了实现上面目的，需要定义一套 schema用于描述表单结构样式行为，其次提供一个表单设计器用于生成这样的 schema，最后提供一个表单渲染器来呈现表单。幸运的是这个工作已经在做了，formily 和 x-render 是比较突出的两个方案，都是阿里在维护，两者各有优缺点：

• formily 优点是高性能、跨框架(react/vue)、支持复杂联动、支持自定义表单组件、提供表单设计器，缺点是概念多、学习成本高、设计器未发布文档不全
• x-render 优点是概念少，简单易上手、支持复杂联动、支持自定义表单组件、提供表单设计器且易于使用，缺点是只支持 antd 组件库、字段较多时存在性能问题

表单竞品分析

[whinc]

form-render

表单联动

form-render 支持联动的工具有 dependencies、watch、函数表达式、form 实例的 setValues/setValueByPath/setSchema/setSchemaByPath 方法

dependencies 属于多对一的被动联动，适用于自定义组件联动更新，效果是所依赖字段的值发生化时，引起当前字段的表单项（即 schema 中的 widget 字段映射的组件）重新渲染，例如：

{
  "type": "object",
  "properties": {
    "a": {
      "title": "a",
      "type": "string"
    },
    "b": {
      "title": "b",
      "type": "string",
      "dependencies": ["a"]
    }
  }
}

{{函数表达式}} 属于多对一的被动联动，适用于schema 属性的联动更新，效果是所依赖字段的值发生变化时，引起当前表达式重新计算，例如

{
  "type": "object",
  "properties": {
    "a": {
      "title": "a",
      "type": "string"
    },
    "b": {
      "title": "{{formData.a || 'b'}}",
      "type": "string"
    }
  }
}

watch 属于主动联动，适用于一对多的场景（多对一和一对一场景推荐前面两种更简单）或者需要更新 schema 的场景，效果是所指定的依赖字段的值发生变化时触发回调，在回调中可以使用 form 实例的方法来更新任意字段的 schema 或 value

import React, { useEffect } from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';

const schema = {
  type: 'object',
  properties: {
    a: {
      title: 'a',
      type: 'string',
    },
    b: {
      title: 'b',
      type: 'string',
    },
  },
};

const Demo = () => {
  const form = useForm();

  const watch = {
    // # 为全局，任何表单数据的变动都会触发
    '#': val => {
      console.log('表单的时时数据为：', val);
    },
    // 字段 a 的值变化时触发
    a: val => {
      form.setValueByPath('input2', val);
    },
  };

  return <FormRender form={form} schema={schema} watch={watch} />;
};

相比 formily, form-render 在 schema 层面的支持弱不少，仅有dependencies 和表达式可以实现被动联动，dependencies不支持监听schema 的变化,不支持用 schema 来表述联动逻辑(如if-else)，表达式也不支持注入 scope, 不支持主动联动

其他

在阅读文档中遇到的一些好奇的点，先记录下来，有空了再回头深究

• html 类型的处理方式
• 表达式的实现方式

[whinc]

formily designer v.s. form-render generator

编辑器	编辑联动	编辑器可定制性
formily designer	高	高
form-render generator	无	中