informed的源码有三个重点： FormController和FieldController以及withFieldStuff函数。他们的关系如下所示：
FormController
FormController是核心。它有三个属性: values，field，以及errors。values和errors的数据类型ObjectMap（为什么要用这个数据格式我没有搞懂）,field是map类型，一个fieldName绑定一个对应的fieldController。FormController 继承EventEmitter，继承这个库在以下功能中都有用到。这里主要介绍setValue/getValue/register方法
ObjectMap
ObjectMap的数据类型有三个属性：objects, map,path。path的格式是这样的
{
'a.b.c':[a,b,c],
'a.b[1]':[a, b, 1]
}
objects就是fieldName和value的一一对应，比如：
{
a:{
b:{
c: 'hello'
}
}
}
map的数据格式如下所示
这个class有还有get和set方法。基本上就是遍历设置和获取对应field的值。
这里我有一个疑问了，我刷了整个informed的方法，用到map的寥寥无几，这个属性有存在的必要吗？
values
values中存储的是每一个包含在form表单中组件的值。它是一个特殊的数据格式(ObjectMap)
和这个属性相关的有两个函数： setValue和getValue，顾名思义。
-
setValue
setValue的代码如下：
this.values.set(
field,
fieldController.config.mask ? fieldController.config.mask(value) : value
);
...
this.emit('change', this.state);
this.emit('values', this.state.values);
this.emit('field', field);
重点是这三个事件change，values和field。那么接收change事件调用的函数在Form组件中的constructor
this.controller.on('change', () => this.forceUpdate());
调用的是react的forceUpdate方法。会让form下的所有子组件重新渲染。
接收field事件的函数，是在withFieldStuff函数中。
const buildFieldState = (formApi, field) => {
return {
value: formApi.getValue(field),
touched: formApi.getTouched(field), //touch并不知道干嘛用的
error: formApi.getError(field),
asyncError: formApi.getAsyncError(field)
};
};
....
const updateMe = name => {
if (name === formApi.getFullField(field)) {
//重新获取field对应新的value的值
this.setState(buildFieldState(formApi, field));
}
};
controller.on('field', updateMe);
以上代码，当接收到field事件时，每一个包裹Field的input，都会从FormController中重新获取当前field的最新的值。
FieldController
FieldController的代码如下所示：
class FieldController {
constructor(field, api, config) {
this.field = field;
this.config = config;
this.api = api;
}
validate(values) {
if (this.config.validate) {
return this.config.validate(this.api.getValue(), values);
}
}
asyncValidate(values) {
if (this.config.asyncValidate) {
return this.config.asyncValidate(this.api.getValue(), values);
}
}
updateConfig(config) {
this.config = config;
}
}
FieldController主要对传入的this.config.validate函数进行一层封装。创建FieldController函数的代码如下所示：
this.fieldController = new FieldController(
formApi.getFullField(field),
this.fieldApi,
{
validateOnBlur,
validateOnChange,
validate,
onValueChange,
asyncValidate,
asyncValidateOnBlur,
initialValue,
validateOnMount,
notify,
mask
}
);
在Field初始化时(constructor )，会为每一个field创建一个controller。
那什么时候使用这个constroller的valiate函数呢？在formController的setValue和setTouched函数都有，前提要配置一些参数
setValue函数中的，如果配置了validateOnChange
...
if (fieldController.config.validateOnChange) {
this.errors.set(field, fieldController.validate(this.state.values));
// We changed so notify all other fields
this.notify(fieldController.config.notify);
}
...
setTouched函数，如果配置了validateOnBlur
if (fieldController.config.validateOnBlur) {
this.errors.set(field, fieldController.validate(this.state.values));
// We changed so notify all other fields
this.notify(fieldController.config.notify);
}
withFieldStuff函数
withFieldStuff函数是连接FieldController和FormController之间的桥梁。同时也从formApi中获取本field相关的函数和值。主要的函数是register函数。该函数会在Field组件componentDidMount中调用
class Field extends PureComponent {
constructor(props) {
super(props);
this.me = React.createRef();
}
componentDidMount() {
this.props.register();
}
}
接下来看register函数的流程。
整个informed源码的重点部分就说完了
问题：
1.如果我在组件A中需要用到组件B的值？（这个在表单中非常常见）
2.作者创建一个objectMap数据类型意义何在？
以后的话：
我看的这个版本的informed源码是比较老。新的版本又出了，使用了hook的技术。所以这个系列未完待续。
`