一、背景
前端开发过程中，往往会遇到很多的表单。简单表单尚可，但复杂表单让人尤为头疼。
比如有一个用来提交 请假单申请 的表单。
第一个表单项是 Radio，为性别：分别是 男 和 女 两种选项。
第二个表单项是个 Select，为请假原因：分别为 事假、年假、调休、病假 这四种选项。另外，当上一个性别选项，选择为 女 后，则额外增加一个 产假 的选项。
第三个表单项是个 Uploader，为图片上传组件，用于上传医院证明：该项仅在请假原因选择为 病假 或 产假 后显示，其余情况不显示。
这个场景已经略微有点复杂度了。很多时候如果不好好设计，将写出不好维护的代码。
那如果更加复杂的场景呢？
有赞云业务中，这种场景非常常见，于是推出了 zan-form 来解决这个问题。
二、配置式
对于上面提到的场景，先思考下，用普通方式怎么写。用普通的方式写一遍后，会发现有点难受。为什么呢？
因为 jsx ，本质上是现实中的物理模型，适合像积木一样，去拼凑出各种各样的 UI。
它一旦加上复杂的判断逻辑后，就会很杂乱，需要花大量精力去整理和修饰。
再想一下 配置式，第一直觉是什么？是逻辑和规则。
表单跟一般的 UI 不一样，尤其复杂的表单，它特别重逻辑，但是视觉复杂度上并不高，不会存在特别多层级的嵌套。所以用配置式来写复杂表单，也许是一个更好的方案。
下面是用配置式表单解决上面提到的场景：
[
{
_component: "FormRadioGroupField",
_name: "sex",
data: [
{
text: "男",
value: "male"
},
{
text: "女",
value: "female"
}
]
},
{
_component: "FormSelectField",
_name: "qingjiaType",
data: [
{
text: "事假",
value: "shijia"
},
{
text: "年假",
value: "nianjia"
},
{
text: "调休",
value: "tiaoxiu"
},
{
text: "病假",
value: "bingjia"
},
{
text: "产假",
value: "chanjia"
}
]
},
{
_component: "ImageUploader",
_name: "hospitalMaterial",
_show: values => ["bingjia", "chanjia"].includes(values.qingjiaType),
tokenUrl: "http://somecdn.youzan.com"
}
];
在上面的配置代码中，_component 和 _name 就不多说了，解释下 _show 方法。
_show 目前仅支持传入一个同步函数，其中入参为 values。
vlaues 等于 zentForm.getFormValues() 所取得的值。
_show 的出参为一个布尔值，当 true 时，表示该组件显示；当为 false 时，表示该组件不显示。
总体来说，就是把一份配置文件，做为一个数组进行遍历。当遇到 _show 方法时，执行之，并根据其 返回值，决定是实例化的这个组件，还是直接返回 null。
三、禁用 children
配置式组件，是否应该支持 children，这是一个有争议性的问题。
支持后有利有弊，但最终还是决定禁止 children 的使用。
原因是，一旦支持实现 children 后，整个配置就偏视觉，而非偏逻辑了。
所以，以下方式是不被允许的：
// 下面的写法，会报错。因为不被允许使用 children
{
_component: 'FormRadioGroupField',
_name: 'sex',
children: [
{
_component: 'Radio',
value: 'male',
text: '男'
},
{
_component: 'Radio',
value: 'female',
text: '女'
}
]
},
当然，为了方便使用，已经对 zent 自带的 FormCheckboxGroupField 和 FormRadioGroupField 这两个组件进行了封装。封装后用法跟 FormSelectField 类似，仅需要传入 [{ text: 'text', value: 'value' }] 即可。如下所示：
// 封装后的 FormRadioGroupField 用法
{
_component: "FormRadioGroupField",
_name: "sex",
data: [
{
text: "男",
value: "male"
},
{
text: "女",
value: "female"
}
]
},
所以对自己写的表单组件，如果需要用到 children 属性，会遇到一些问题，需要做一些改造。
当然，也有其他方式可以绕过，就是后面小节会提到的 _slot。
四、注册自定义表单组件
到目前为止，能够直接在配置文件中使用的组件，都是 zent.Form 下的组件。
那么对于自定义组件怎么处理呢？
当前在 zan-form 内部维护了一个 componentLib 对象。
在该对象中，key 是组件名，value 是 Component。当解析配置文件的时候，会根据 _component 字段，去找到对应的组件，并实例化它。
所以我们只需要想办法，在 componentLib 中放入我们自定义的组件就可以了。
zan-form 提供了 zanForm.register('ComponentName', MyComponent) 方法，可以在 componentLib 中注册我们自己的组件。
注意，第三节也提到过，如果自定义组件需要用到 children属性，需要对该组件进行改造，因为当前的配置式是不支持 children 的。
为了能在 zentForm 中更好地使用，自定义组件需要暴露 value 属性，以及支持 onChange 方法做为回调，并用 zent.Form.Filed 包裹。
五、插槽
某些场景下，纯粹的配置式无法满足需求，则需要用 插槽 来实现扩展了。
插槽 的使用如下：
// form.config.js
[
{
_slot: "ImageUploader"
},
{
_slot: "MyFooter"
}
];
// Form.jsx
import zanForm from "zan-form";
import formConfig from "./form.config.js";
const Slot = zanForm.Slot;
class Form extends Component {
render = () => {
return zanForm(formConfig, this)(
<React.Fragment>
<Slot id="ImageUploader">
<ImageUploader>点击上传图片</ImageUploader>
</Slot>
<Slot id="MyFooter">
<Footer>我是页脚</Footer>
</Slot>
</React.Fragment>
);
};
}
如何使用 插槽，总结起来就是两个步骤：
首先，在配置中，选择合适的点，预留一个插槽。
然后，在配置外的 zanForm 中，使用 Slot 定义一个 待插入组件，并赋予唯一 id。
注意，_slot 可以跟 _show 一起使用，但是其他的，例如 _fetch_data、_format 等，一律不支持。
再说下 _slot 的实现原理，其实也很简单：
在 zan-form 内部维护有一个 slotMap 对象，以 Slot.id 做为 key，Slot.children 做为 value。当遍历配置文件时，遇到 _slot，则去 slotMap 里面取对应的 Slot.children ，并填充进插槽即可。
六、与服务端的交互
在日常开发中，存在着大量与服务端交互的场景。
比如 FormSelectField 中的 data，需要从服务端获取。
一般的方式是，在 componentDidMount 中获取数据，并且通过 setState 塞入到 FormSelectField 的 data 中去。
然而在配置文件中，这似乎很难实现。那么在配置式中，怎么样获取远程数据呢？
目前可以通过 _fetch_data 方法来返回一个 Promise 的方式来实现，如下所示：
// "店铺类型"的Select
{
_component: 'FormSelectField',
_name: 'shopType',
_fetch_data: () => {
return getShopType().then(items => {
return items.map(item => {
return {
text: item.desc,
value: item.type,
};
});
});
},
data: [],
},
以下两点值得注意：
1、原组件（如 FormSelectField 组件）必须支持 data 属性。因为获取到的数据，会默认塞入到 data 中去。
2、_fetch_data 只会触发一次。
实现方式：
这个特性，目前是通过在【原组件】外面，又另外包裹了一层 DecoratorCoponent 实现的。
当 DecoratorComponent 触发 componentDidMount 的时候，就去调用 _fetch_data，并将 data 通过 props 传给【原组件】。
也就解释了上面提到的，为什么 _fetch_data 只会触发一次。
七、重启组件
存在一种场景，如下：
第一行表单项，是一个 FormSelectField，代表省份。
第二行表单项，也是一个 FormSelectField，代表城市。但是该项会根据省份 id，动态从服务端获取城市数据。也就是说，上一项省份改变时，该项城市列表也会改变。
根据上述第六节提到的，如果只用 _fetch_data，那么根据省份 id 获取城市列表数据，只会触发一次，不会再触发第二次。
所以提出了一个 重启 组件的概念。
重启组件的内部实现，实际上分为两个步骤：
第一步，在 DecoratorCoponent 中改变【原组件】的 key 来重启原组件。
第二步，重新触发自身的 _fetch_data 函数，重新将 data 通过 props 传给【原组件】。
如下所示：
[
{
_component: "FormSelectField",
_name: "province",
required: "请选择您所在省份",
data: [{ text: "浙江省", value: 30 }, { text: "广东省", value: 31 }]
},
{
_component: "FormSelectField",
_name: "city",
_fetch_data: values => {
if (!values.province) {
return Promise.resolve([]);
} else {
return fetchCityByProvince(values.province);
}
},
_subscribe: (prevValues, values, restart) => {
if (values.province !== prevValues.province) {
restart();
}
},
required: "请选择您所在城市",
data: []
}
];
欲 重启，需先 订阅。使用 _subscribe 可订阅。
_subscribe 方法中接受三个入参，分别是上一个状态的 values，本状态的 values，以及一个用来重启组件的 restart 方法。
比较两次状态的 values.province，如果不同，则触发重启。
至于 _subscribe，其实是借助 DecoratorCoponent 中的 componentDidUpdate 实现的。
八、格式化组件
有时候，需要对组件做一些样式上的修改，那么在配置式中，怎么做呢？
目前提供了一个 _format 方法来实现这一点。
如下所示：
[
{
_component: "FormInputField",
_name: "age",
_format: ($component, values) => (
<div>
{$component}
<span>岁</span>
</div>
),
label: "年龄"
}
];
format 方法中，\$component 是组件实例，values 同 _show 方法的 values。它们做为参数传入，最后返回一个改动后的组件实例。
_format 方法的内部实现，跟 _show 类似。
九、表单回填
一些场景下，比如编辑的时候：需要当从服务端取回数据，并在表单上回显。
这种场景该怎么做呢？
zan-form 提供了一个zanForm.setValues(values, this) 方法，即可把数据回填回去。
本质上，setValues 方法，是对 zentForm.setFieldsValue() 的一个递归调用，最终使 zentForm.getFormValues() 的值趋向于稳定。
十、有赞云招人
有赞云大量 hc 招聘前端，有兴趣的可以加微信 socialHunter 咨询！
