JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。
JSON表单的优点是：
可以快速构建出一个表单
表单的数据、逻辑、视图分离，方便抽离和进一步抽象
提供校验、自动缓存等额外功能，提升录入体验
可以跨项目的共用复杂的表单组件
原始表单的缺点
1：代码量庞大，开发效率低
每次开发一个表单页的时候，都需要重复编写表单组件及其交互事件的代码，这块代码重复编写且与主线业务逻辑无关，除此之外，表单的校验、缓存等额外功能，也需要不少的代码量，这样就造成了一个表单页的代码量庞大。
2：不便于抽离和进一步的抽象
在一个表单页内，往往会将表单数据、表单组件、控制逻辑杂糅在一起，当发现某一个子功能在很多场景下都需要用到的时候，想把该子功能拆分出来发现并不容易，因为逻辑、数据、视图的杂糅，导致想把子功能不受影响的剔除出来需要很仔细的检查，这样就导致功能的抽离和抽象的不便
3：维护成本高
这个和第二个问题是同样的原因，这也是我的亲身经历，当我在项目中想优化一个小功能的时候，发现不仅把之前的逻辑改没了，还引出了不少的bug，这导致在一个逻辑很复杂的表单里，维护变成了一件高危工作。
4：需要额外处理校验和缓存等功能
一个栗子
const config = { formKey: 'example-form', data: { name: '', descr: '', typeName: '' }, config: [ { type: 'input', dataKey: 'name', label: 'param', placeholder: '请输入param', validate: ['required', /^[a-zA-Z_{}0-9]+$/g], style: { display: 'inline-block', width: 270, }, }, { type: 'select', dataKey: 'typeName', options: ['string', 'integer', 'float'], style: { display: 'inline-block', width: 100, margin: '0 15px' }, validate: [{type: 'required', message: 'param类型不能为空'}] }, { type: 'textarea', dataKey: 'descr', placeholder: '请输入param含义', label: 'param含义', validate: ['required'], style: { width: 385, } }, ] } <From ref={ref => this.FormWrap = ref} config={config}></From>
上面是用JSON描述的三个常用的表单组件组合成的表单，其效果图如下：
JSON表单的格式
{ formKey: 'paramAddForm', data: {}, config: [] }
属性
是否必传
说明
类型
默认值
formKey
否
用来自动缓存，localStorage的key，不传表示不自动缓存
string
-
className
否
用来添加一些自定义样式
string
-
data
是
表单的提交数据，有自动缓存和校验功能
object
-
assisData
否
用于表单控制逻辑的额外数据
object
-
config
是
组件配置，表单组件的配置
Array
-
realTimeSubmit
否
表单是否实时提交，一般用于筛选表单
boolean
false
表单组件的配置
{ type: 'input', dataKey: 'name', label: 'param', validate: ['required'], style: {} }
属性
是否必传
说明
类型
默认值
type
是
表单组件的类型，其值可以为: input、select、textarea、form_array、container和一些自定义表单组件
string
-
dataKey
否
指定表单组件值的key，可以为param.name.firstName形式
string
-
label
否
表单组件的label
string
-
placeholder
否
表单组件的placeholder
string
-
validate
否
表单组件的校验规则
Array
-
style
否
表单组件的布局样式
string
-
options
否
当表单组件为select时，需要传入的options
Array
-
render
否
当type为container时，为自定义组件，render为渲染方法
Function
-
preventSubmit
否
当realTimeSubmit为true时，控制当前表单组件是否实时提交
boolean
false
children
否
当type为form_array时，children表示子组件配置列表
Array
-
modifyDataFn
否
当type为自定义组件时，且需要覆盖render方法中的提交数据方法，可以使用modifyDataFn来重新自定义提交数据
Function
-
关键字段解释
1. type