informed的源码有三个重点: FormController和FieldController以及withFieldStuff函数。他们的关系如下所示:
image.png
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的技术。所以这个系列未完待续。
`
网友评论