之前在练习React+Antd时写了几个表单的小Demo，本文总结一下有关表单及组件设计方面的思考
比如我们在自动生成这个表单组件的时候，虽然功能和字段不是很多，但是我们应该怎么设计出一个合理的结构，才是一个值得思考的问题。
state数据结构的设计
我们知道React是单向数据流，并且是数据驱动。设计好一个数据结构，是我们关键的一步。
首先，我们应该思考，怎么用数据来描述我们的页面。第二步，我们的数据要结构化，易于我们遍历，查找和自动生成相应的视图。第三步，也就是扩展性，假如这个表单要加入新的字段，或者修改某个字段，如何更加的方便快捷。
开始设计
这个表单有四个字段，每个字段就相当于一个key-value的结构，所以我们的数据部分可以设计成为一个对象，采用key-value的形式。
const value = { '连接地址':'xxx', '端口号','xxx', '用户名':'xxx', '密码':'xxx', }
扩充
刚刚只是我们的第一步，一般我们填写表单的时候，都有对应的规则信息，如果不满足相应的规则，我们是提交不成功的。那么我们怎么设置表单的规则呢？
如果我们在数据部分去加相应的信息，value里面的信息就很冗余和复杂。我们可以专门设置一个字段来限定每个字段相应的属性，并且还可以在字段里面添加默认值，相应的类型
[ { "label": "连接地址", "defaultValue": "192.168.0.1", "field": "addr", "type": "string", "required": "true" }, { "label": "端口号", "defaultValue": "21", "field": "port", "type": "string", "required": "true" }, { "label": "用户名", "defaultValue": "user", "field": "userName", "type": "string", "required": "true" }, { "label": "密码", "defaultValue": "password", "field": "password", "type": "string", "required": "true" } ]
我们可以用label字段表示相应的字段名，通过field来将每个字段的限制规则和相应的数据对应起来。我们将原来的value数据也完善一下
"value": { "password": "123456", "port": "24", "addr": "192.168.0.1", "userName": "admin" },
然后我们就可以根据这个完整的数据来自动渲染表单了
{ "value": { "password": "123456", "port": "24", "addr": "192.168.0.1", "userName": "admin" }, "formContent": "[{"label":"连接地址","defaultValue":"192.168.0.1","field":"addr","type":"string","required":"true"},{"label":"端口号","defaultValue":"21","field":"port","type":"string","required":"true"},{"label":"用户名","defaultValue":"user","field":"userName","type":"string","required":"true"},{"label":"密码","defaultValue":"password","field":"password","type":"string","required":"true"}]" }
Antd_Form
看了下Antd表单组件的设计，它将一个Form拆分出了Form和Form.item
为什么要这么拆分呢？
我们在设计一个组件的时候，需要从功能上拆分层次，尽量让组件原子化，只干一件事情。还可以让容器组件（只管理数据）和渲染组件（只管理视图）进行分离
通过Form表单的Api，我们可以发现，Form组件可以控制宏观上的布局，整个表单的样式和数据收集。Form.item控制每个字段的校验等。
也不知道对不对，就先这么记录一下 我的表单实现:表单demo练习
