FormRender使用场景及原理简介

有没有那么一种表单方案，上手成本低、与日常开发习惯类似，还可以低成本的使用现有组件进行编排？

本文介绍一种轻量的表单配置方案，重头戏还是原生组件的沉淀，FormRender 作为胶水做表单的编排。它提供了简单表达式联动，表单数据双向绑定等便捷的能力，源码量也比较少约 8k，易读性比较高，魔改源码不是梦！

最后我们还对比了 Formily 和 FormRender 在实现一个简单联动场景的差异，供大家参考~

https://xrender.fun/form-render

一站式中后台 表单解决方案

一、背景介绍

一、背景介绍

1.1 设计理念

schema 以国际标准的 JSON schema 为基础，同时能够方便使用任何 antd 的 props

通过 bind 字段，允许数据的双向绑定

使用 {{...}} 书写表达式来完成简单的联动，值得一提的是，这里表达式支持所有 js 语法

1.2 代码量

代码行：8172

文件数：56

二、现有能力

2.1 数据双向绑定

formData
rootValue

示例：https://xrender.fun/playground 最简样例修改


{{JSON.stringify(formData)}}
{{JSON.stringify(rootValue)}}

2.2 表达式联动

示例：https://xrender.fun/playground 最简样例修改，实现字段联动展示隐藏


{
	"type": "object",
	"properties": {
		"checkbox1": {
			"title": "展示更多内容",
			"type": "boolean"
		},
		"select1": {
			"title": "请假原因",
			"type": "string",
			"enum": ["a", "b", "c"],
			"enumNames": ["病假", "有事", "其它 (需注明具体原因)"],
			"hidden": "{{formData.checkbox1 !== true}}",
			"widget": "radio"
		},
		"input1": {
			"title": "具体原因",
			"type": "string",
			"format": "textarea",
			"hidden": "{{rootValue.checkbox1 !== true || formData.select1 !== 'c'}}"
		}
	}
}

2.3 字段映射

前端一个组件对应后端多个字段


const schema = {
	type: 'object',
	properties: {
		"dateRange": {
			"title": "日期范围",
			"type": "range",
			"format": "date",
			"bind": ["startDate", "endDate"]
		},
	},
};

2.4 自定义组件

见示例：https://xrender.fun/playground 个性选择框

widget 选择组件

Props 传参


import { Cascader } from 'antd'; 
 
// 顶层引入注册 ... 
<Form form={form} schema={schema} widgets={{ cascader: Cascader }} /> 
 
// schema 中使用 
location: { title: '省市区', type: 'string', widget: 'cascader', props: { ... } },

2.5 dependency 联动

示例1：https://xrender.fun/form-render/demos


const schema = {
	"type": "object",
	"displayType": "row",
	"properties": {
		"select1": {
			"title": "输入框",
			"type": "string",
			"dependencies": ["useSelect"],
			"widget": "MyTextEditor",
			"width": "60%"
		},
		"useSelect": {
			"title": "输入框高度",
			"type": "number",
			"width": "60%"
		}
	}
};
 
const MyTextEditor = props => { 
    const { addons } = props; 
    console.log(addons.dependValues); 
    let rows; 
    if (addons && addons.dependValues) { 
        rows = addons.dependValues[0] || 2; 
    } 
    return <TextArea rows={rows} />; 
};

示例2：https://xrender.fun/form-render/demos/index2

自定义 MyCheckbox 组件，通过 setValueByPath 方法修改下方多选值

Dependencies 传入 boxes 值，同步修改全选状态

2.6 动态修改局部 schema

示例：https://xrender.fun/form-render/advanced/watch


form.setSchemaByPath('obj1.select1', { 
    enum: ['east', 'south', 'west', 'north'], 
    enumNames: ['东', '南', '西', '北']
});

2.7 watch 表单监听


const Demo = () => { 
    const form = useForm(); 
    const watch = {
         // # 为全局 
        '#': val => { 
            console.log('表单的实时数据为：', val); 
        }, 
        input1: val => { 
            form.setValueByPath('input2', val); 
        }, 
        input2: () => { 
            // 动态修改枚举值 
            form.setSchemaByPath('x[].y.z', { enum: [1, 2, 3] }); } 
        };
     return <FormRender form={form} schema={schema} watch={watch} />; 
};

2.9 自定义校验

示例：https://xrender.fun/form-render/demos/index4

2.10 详情与编辑态转换

编辑态：

详情态：

readOnly

只读模式，一般用于预览展示，全文 text 展示

boolean

FALSE

自定义组件中，通过 readOnlyWidget 属性指定展示态组件


{
	"type": "object",
	"properties": {
		"string": {
			"title": "网址输入自定义组件",
			"type": "string",
			"widget": "input",
			"readOnlyWidget": "label"
		}
	}
}

2.11 表单设计器

示例：https://xrender.fun/generator/playground

下面我们自己定义一个组件，并定制表单设计器


import { PageContainer } from '@ant-design/pro-components';
import { message, Button } from 'antd';
import Generator from 'fr-generator';
 
const Demo = () => {
 
  const NewWidget = ({ value = 0, onChange, ...elesProps}) => {
    console.log('songzc-elesProps', elesProps);
    return <Button type='primary'
      {...elesProps}
      onClick={() => {
        message.success(value + 1);
        onChange(value + 1);
      }}>
      {value}
    Button>;
  };
  // {{JSON.stringify(formData)}}
  return (
    <PageContainer
      header={{
        title: '表单设计器',
      }}
    >
      <div style={{ height: '90vh' }}>
        <Generator
          widgets={{ NewWidget }}
          settings={[
            {
              title: '组件分类111',
              widgets: [
                {
                  text: '计数器',
                  name: 'asyncSelect',
                  schema: {
                    title: '计数器',
                    type: 'number',
                    widget: 'NewWidget',
                  },
                  setting: {
                    title: { title: '标题', type: 'string' },
                    props: {
                      type: 'object',
                      properties: {
                        // colorP: { title: '颜色', type: 'string' },
                        disabled: { title: '禁用', type: 'boolean' },
                        ghost: { title: '幽灵', type: 'boolean' },
                      }
                    }
                  },
                }
              ],
            },
          ]}
          commonSettings={{
            description: {
              title: '自定义共通用的入参',
              type: 'string',
            },
          }}
        />
      div>
    PageContainer>
  );
};
 
export default Demo;

三、代码分析

3.1 表达式解析

通过正则匹配，首先判断是否为表达式

通过 Function 转为函数，注入 formData、rootValue 全局变量

3.2 Watch 监听


const Demo = () => {
  const form = useForm();
  const watch = {
    // # 为全局
    '#': val => {
      console.log('表单的实时数据为：', val);
    },
    input1: val => {
      form.setValueByPath('input2', val);
    },
  };
  return <FormRender form={form} schema={schema} watch={watch} />;
};

监听 value 变化，执行 watch 内部函数

3.3 如何解析 schema

1. core.js 判断 schema 类型

2. 渲染不同类型元素

3. 递归调用渲染

四、方案对比

使用 FormRender 和 Formily 实现同一个场景：计算总价

4.1 Ant Form 实现

https://codesandbox.io/s/ji-ben-shi-yong-antd-4-21-6-forked-3dek61?file=/demo.js


const App = () => {
  const [form] = Form.useForm();
  const [price, setPrice] = useState();
  const [count, setCount] = useState();
  useEffect(() => {
    if (price && count) {
      form.setFieldsValue({ total: price * count });
    }
  }, [price, count, form]);
 
  return (
    <Form form={form}>
    <Form.Item label="单价" name="price">
      <InputNumber onChange={value => setPrice(value)} />
    Form.Item>
    <Form.Item label="数量" name="count">
      <InputNumber onChange={value => setCount(value)} />
    Form.Item>
    <Form.Item label="总价" name="total">
      <InputNumber />
    Form.Item>
  Form>
  );
};

4.2 Formily 实现

https://codesandbox.io/s/pensive-surf-ssrl4w?file=/src/App.js


export default () => {
  const form = useMemo(() => createForm(), [])
 
  return (
    <Form form={form} labelCol={6} wrapperCol={12}>
      <SchemaField>
        <SchemaField.Number
          title="单价"
          x-decorator="FormItem"
          x-component="NumberPicker"
          x-validator={[]}
          name="price"
          x-index={0}
        />
        <SchemaField.Number
          title="数量"
          x-decorator="FormItem"
          x-component="NumberPicker"
          x-validator={[]}
          name="count"
          x-index={1}
        />
        <SchemaField.String
            title="总价"
            x-decorator="FormItem"
            x-component="Input"
            x-validator={[]}
            name="total"
            x-index={2}
            x-pattern="readPretty"
            x-component-props={{}}
            x-reactions={{
                //拿出同级的price与count数据，取乘积
                dependencies: ['.price', '.count'],
                when: '{{$deps[0] && $deps[1]}}',
                fulfill: {
                    state: {
                        value: '{{$deps[0] * $deps[1]}}',
                    },
                },
            }}
        />
      SchemaField>
      
    Form>
  )
}

4.3 FormRender 实现


const schema = {
  "type": "object",
  "properties": {
    "price": {
      "title": "单价",
      "type": "number"
    },
    "count": {
      "title": "数量",
      "type": "number"
    },
    "total": {
      "title": "总价",
      "type": "string",
      "props": {
          "value": "{{formData.price * formData.count}}"
      }
    }
  },
  "labelWidth": 120,
  "displayType": "row"
}
<Form
  schema={schema}
  widgets={{ site: SiteInput }}
  //...
/>

	Ant Form	FormRender	Formily
上手难度	中（日常开发使用较为熟悉）	低（理念与 Ant Form类似，组件 props 设计相似）	高（性能原因重新设计了依赖关系和写法）
成熟度	高	中	高
性能	中	中	高

五、总结

设计理念以使用者角度考虑较多
- formData 全局变量，简化数据监听、处理成本
- {{}} 表达式使用方式简单
- 组件接入成本低，符合 FormItem 受控规范（value/onChange）即可
- Props 传参，符合日常开发经验，理解成本低
- Rules 校验，支持正则和 validator，与 ANTD 一致

使用及改造难度低
- 代码量目前较小，框架级改造容易
- 项目中沉淀组件的接入成本低
- 特殊参数较少，符合国际schema 规范：https://json-schema.org/understanding-json-schema/
- 局部表单场景适用，可通过 value 与外部原生代码交互


<Form.Item label="测试" name="partForm">
    <FormRender
        form={form}
        schema={schema}
        onFinish={onFinish}
        widgets={{ MyCheckbox, DatePicker }}
      />
Form.Item>
<Form.Item label="测试" name="partForm">
    <FormRender
        form={form}
        schema={schema}
        onFinish={onFinish}
        widgets={{ MyCheckbox, DatePicker }}
      />
Form.Item>

参考文档

FormRender 开源第二弹：一站式表单解决方案 - 掘金本文旨在介绍 Form Render （FR）这个阿里开源表单解决方案。简述它想解决的问题，我们的理念和解法，这半年走过的路，以及 FR 的未来规划所见即所得的表单设计器，拖拖拽拽完成表单的开发。并可自由定制成符合自身喜好的独特设计器这个未来其实以近在眼前。FormRend…https://juejin.cn/post/6870316361726787591

开始使用 - XRenderhttps://xrender.fun/form-render 【问卷】XRender 使用场景 · Issue #94 · alibaba/x-renderhttps://github.com/alibaba/x-render/issues/94

相关阅读:
【Mybatis编程：统计相册表中的数据的数量】
PMP真的有用吗？
python random应用实例从可选池随机选取指定个数的元素并随机排序
 上周热点回顾（12.4-12.10）
MySQL（高级、面试） —— （MySQL优化二）Explain 优化MySQL索引
 高数_证明_方向导数最大值方向为梯度方向
 微信小程序实战，基于vue2实现瀑布流
 解密prompt系列5. APE+SELF=自动化指令集构建代码实现
 七夕当然要学会SQL优化好早点下班去找对象
 Cmake、Qt与VS编译VTK（生成QVTK）
原文地址：https://blog.csdn.net/zhichaosong/article/details/126146281

FormRender使用场景及原理简介

一、背景介绍

1.1 设计理念

1.2 代码量

二、现有能力

2.1 数据双向绑定

2.2 表达式联动

2.3 字段映射

2.4 自定义组件

2.5 dependency 联动

2.6 动态修改局部 schema

2.7 watch 表单监听

2.9 自定义校验

2.10 详情与编辑态转换

2.11 表单设计器

三、代码分析

3.1 表达式解析

3.2 Watch 监听

3.3 如何解析 schema

四、方案对比

4.1 Ant Form 实现

4.2 Formily 实现

4.3 FormRender 实现

五、总结

参考文档

开始使用 - XRenderhttps://xrender.fun/form-render【问卷】XRender 使用场景 · Issue #94 · alibaba/x-renderhttps://github.com/alibaba/x-render/issues/94

开始使用 - XRenderhttps://xrender.fun/form-render 【问卷】XRender 使用场景 · Issue #94 · alibaba/x-renderhttps://github.com/alibaba/x-render/issues/94