informed源码解析

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的数据格式如下所示

image.png

这个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函数的流程。

image.png

整个informed源码的重点部分就说完了

问题：
1.如果我在组件A中需要用到组件B的值？（这个在表单中非常常见）
2.作者创建一个objectMap数据类型意义何在？

以后的话：
我看的这个版本的informed源码是比较老。新的版本又出了，使用了hook的技术。所以这个系列未完待续。