摘要：引言看過(guò)源碼的都知道，其實(shí)是在一組組件的基礎(chǔ)上進(jìn)行了一層封裝，本文主要解讀組件的基礎(chǔ)組件，另外會(huì)略過(guò)模式下的代碼。解讀源碼首先要從自己最常用的或者感興趣的入手，首先組件最主要的還是在這個(gè)裝飾器入手。

看過(guò)antd源碼的都知道，antd其實(shí)是在一組react-componment組件的基礎(chǔ)上進(jìn)行了一層ui封裝，本文主要解讀antd組件Form的基礎(chǔ)組件react-componment/form，另外會(huì)略過(guò)development模式下的warning代碼。

解讀源碼首先要從自己最常用的或者感興趣的入手，首先f(wàn)orm組件最主要的還是在Form.create({options})這個(gè)裝飾器入手。找到項(xiàng)目下的文件createForm.js，這個(gè)文件還是主要主要對(duì)createBaseForm.js文件進(jìn)行了一層封裝，提供了一些默認(rèn)配置參數(shù)，下看查看createBaseForm.js里的createBaseForm方法，改方法主要是一個(gè)裝飾器作用，包裝一個(gè)高階React組件，在props里注入一個(gè)值為formPropName(默認(rèn)為form)變量，所有功能在這個(gè)變量里完成，主要內(nèi)容如下

render() {
  const { wrappedComponentRef, ...restProps } = this.props;
  const formProps = {
    [formPropName]: this.getForm(), // 來(lái)在 formPropName默認(rèn)為form，getForm方法來(lái)自`createForm.js`
  };
  if (withRef) {
    formProps.ref = "wrappedComponent";
  } else if (wrappedComponentRef) {
    formProps.ref = wrappedComponentRef;
  }
  const props = mapProps.call(this, {
    ...formProps,
    ...restProps,
  });
  return ;
}

在裝飾器初始化的時(shí)候，F(xiàn)orm初始化了一個(gè)只屬于該組件實(shí)例的store，用來(lái)存放當(dāng)前Form組件的一些輸入的數(shù)據(jù)，主要代碼如下:

const fields = mapPropsToFields && mapPropsToFields(this.props);  // mapPropsToFields來(lái)自于Form.create的配置參數(shù)，用來(lái)轉(zhuǎn)化來(lái)自mobx或者redux等真正的store來(lái)源的value，以初始化該Form實(shí)例的fieldsStore
this.fieldsStore = createFieldsStore(fields || {});  // createFieldsStore來(lái)自于文件`createFieldsStore.js`文件

柯里化函數(shù)，通過(guò)id與參數(shù)聲明的輸入，返回一個(gè)函數(shù)以輸入組件為入?yún)⒌暮瘮?shù)，通過(guò)該函數(shù)聲明的輸入組件與表單Form雙向數(shù)據(jù)綁定。

  ...
  getFieldDecorator(name, fieldOption) {
    const props = this.getFieldProps(name, fieldOption);  // 初始化一個(gè)field
    return (fieldElem) => {
      const fieldMeta = this.fieldsStore.getFieldMeta(name);  // 獲取變化（Form的onChange）后的field數(shù)據(jù)
      const originalProps = fieldElem.props;
      fieldMeta.originalProps = originalProps;  // 輸入組件初始化時(shí)保存的Prop
      fieldMeta.ref = fieldElem.ref;
      return React.cloneElement(fieldElem, {
        ...props,
        ...this.fieldsStore.getFieldValuePropValue(fieldMeta),  // 獲取prop屬性 value
      });
    };
  }
  ...

查看函數(shù) getFieldProps，主要用來(lái)初始化輸入組件的props，將特定的函數(shù)緩存在內(nèi)部，如onChange事件，另外初次保存field到store中

  ...
  getFieldProps(name, usersFieldOption = {}) {
    if (!name) {
      throw new Error("Must call `getFieldProps` with valid name string!");
    }
    delete this.clearedFieldMetaCache[name];
    const fieldOption = {
      name,
      trigger: DEFAULT_TRIGGER,
      valuePropName: "value",
      validate: [],
      ...usersFieldOption, // 用戶(hù)輸入，如rules，initialValue
    };

    const {
      rules,
      trigger,
      validateTrigger = trigger,
      validate,
    } = fieldOption;

    const fieldMeta = this.fieldsStore.getFieldMeta(name);
    if ("initialValue" in fieldOption) {
      fieldMeta.initialValue = fieldOption.initialValue;
    }

    const inputProps = {
      ...this.fieldsStore.getFieldValuePropValue(fieldOption), // 獲取輸入組件的value，如果沒(méi)有，返回initialValue
      ref: this.getCacheBind(name, `${name}__ref`, this.saveRef),
    };
    if (fieldNameProp) { // 及value
      inputProps[fieldNameProp] = name;
    }

    const validateRules = normalizeValidateRules(validate, rules, validateTrigger); // 校驗(yàn)規(guī)則標(biāo)準(zhǔn)化
    const validateTriggers = getValidateTriggers(validateRules);
    validateTriggers.forEach((action) => {
      if (inputProps[action]) return;
      inputProps[action] = this.getCacheBind(name, action, this.onCollectValidate); // 如果設(shè)置了輸入校驗(yàn)rules，綁定onChange事件`this.onCollectValidate`
    });

    // make sure that the value will be collect
    if (trigger && validateTriggers.indexOf(trigger) === -1) {
      inputProps[trigger] = this.getCacheBind(name, trigger, this.onCollect); // 如果沒(méi)有綁定rules校驗(yàn)，綁定默認(rèn)的onChange事件
    }
    const meta = {
      ...fieldMeta,
      ...fieldOption,
      validate: validateRules,
    };
    this.fieldsStore.setFieldMeta(name, meta);  // 保存field到store中
    if (fieldMetaProp) {
      inputProps[fieldMetaProp] = meta;
    }
    if (fieldDataProp) {
      inputProps[fieldDataProp] = this.fieldsStore.getField(name);
    }
    return inputProps;
  },
  ...

getCacheBind方法，緩存函數(shù)，使用bind方法綁定上下文并緩存部分參數(shù)，返回一個(gè)新的函數(shù)，用做onChange及數(shù)據(jù)校驗(yàn)。

  ...
  getCacheBind(name, action, fn) {
    if (!this.cachedBind[name]) {
      this.cachedBind[name] = {};
    }
    const cache = this.cachedBind[name];
    if (!cache[action]) {
      cache[action] = fn.bind(this, name, action); // 綁定參數(shù)并返回
    }
    return cache[action];
  },
  ...

在getFieldProps方法中看到利用getCacheBind方法當(dāng)無(wú)rules的時(shí)候綁定了一個(gè)onCollect方法，onCollect方法主要調(diào)用onCollectCommon方法，并將得到的結(jié)果保存到store。

onCollectCommon(name, action, args) {
  const fieldMeta = this.fieldsStore.getFieldMeta(name);
  if (fieldMeta[action]) {  // 如果getFieldDecorator方法中的參數(shù)定義了onChange，則觸發(fā)改onChange
    fieldMeta[action](...args);
  } else if (fieldMeta.originalProps && fieldMeta.originalProps[action]) { // 如果輸入組件綁定了onChange，則觸發(fā)該onChange
    fieldMeta.originalProps[action](...args);
  }
  const value = fieldMeta.getValueFromEvent ?  // 獲取更新后的value，兼容原生組件e.target.value
    fieldMeta.getValueFromEvent(...args) :
    getValueFromEvent(...args);
  if (onValuesChange && value !== this.fieldsStore.getFieldValue(name)) {  // 如果Form.create時(shí)用戶(hù)定義有onValuesChange，則觸發(fā)
    const valuesAll = this.fieldsStore.getAllValues();
    const valuesAllSet = {};
    valuesAll[name] = value;
    Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]));
    onValuesChange(this.props, set({}, name, value), valuesAllSet);
  }
  const field = this.fieldsStore.getField(name);    // 獲取合并field，并返回
  return ({ name, field: { ...field, value, touched: true }, fieldMeta });
},

在有輸入rules的時(shí)候getCacheBind方法綁定onCollectValidate作為onChange事件，該方法做了除了調(diào)用了onCollectCommon事件以外，還調(diào)用了校驗(yàn)方法validateFieldsInternal。

該方法主要是從store中獲取rules校驗(yàn)規(guī)則并標(biāo)準(zhǔn)化后，使用async-validator模塊進(jìn)行校驗(yàn)，并把結(jié)果保存到store中，本文不做講解。

該方法主要是設(shè)置store中的field，因?yàn)閟tore的數(shù)據(jù)是不可觀測(cè)的數(shù)據(jù)，不會(huì)引起頁(yè)面的重渲染，該方法也負(fù)責(zé)調(diào)用forceUpdate()強(qiáng)制更新頁(yè)面。

setFields(maybeNestedFields, callback) {
  const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields); // 處理field嵌套問(wèn)題
  this.fieldsStore.setFields(fields);
  if (onFieldsChange) {  // 如果設(shè)置有FieldsChange事件監(jiān)聽(tīng)事件變化，則觸發(fā)事件
    const changedFields = Object.keys(fields)
      .reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {});
    onFieldsChange(this.props, changedFields, this.fieldsStore.getNestedAllFields());
  }
  this.forceUpdate(callback);  // 強(qiáng)制更新視圖
},

主要方法大概就上面這些，其中流程差不多在每次setFields之前，會(huì)在store中存一個(gè)field的變化字段fieldMeta，在最后強(qiáng)制更新頁(yè)面的時(shí)候，將該變量取出來(lái)做處理后覆蓋到field，所有數(shù)據(jù)保存在field中，并提供了一些hock方法如setFieldsValue、validateFields等方法設(shè)置和獲取store中的field字段和值。