rc-form流程简析

4,605 阅读4分钟

rc-form-demo:


import React from 'react';
import ReactDOM from 'react-dom';
import { createForm, formShape } from 'rc-form';

class Form extends React.Component {
  static propTypes = {
    form: formShape,
  };

  componentWillMount() {
    this.nameDecorator = this.props.form.getFieldDecorator('name', {
      initialValue: '',
      rules: [{
        required: true,
        message: 'What\'s your name?',
      }],
    });
  }

  onSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((error, values) => {
      if (!error) {
        console.log('ok', values);
      } else {
        console.log('error', error, values);
      }
    });
  };

  onChange = (e) => {
    console.log(e.target.value);
  }

  render() {
    const { getFieldError } = this.props.form;

    return (
      <form onSubmit={this.onSubmit}>
        {this.nameDecorator(
          <input
            onChange={this.onChange}
          />
        )}
        <div style={{ color: 'red' }}>
          {(getFieldError('name') || []).join(', ')}
        </div>
        <button>Submit</button>
      </form>
    );
  }
}

const WrappedForm = createForm()(Form);
ReactDOM.render(<WrappedForm />, document.getElementById('__react-content'));

上面的例子直接调用了rc-form的createForm方法,第一个参数配置对象未传递,第二个参数是需要被修饰的业务组件 在createForm方法中只是定义了mixin,接着继续调用了最主要的createBaseForm:

function createBaseForm(options={}, mixins={} ) {
    const {
        mapPropsToFields, // 页面初始化或重绘时,将组件接受到的props转变为表单项数据注入this.fields中
        onFieldsChange, // 表单项发生改变时执行函数,可以将表单项的值存入redux.store  
        ...
        withRef, // 设定被封装组件的ref属性为"wrappedComponent" 
    } = option;
    //这里的WrappenComponent就是一开始例子中的Form组件
    return funciton decorate(WrappedComponent) {
        const Form = createReactClass({
            mixins,
            getInitialState(){}, // 初始化组件state
            componentWillReceiveProps(nextProps){}, // mark-recProps,初始化部分数据
            onCollect(){}, // 收集表单数据
            onCollectCommon() {},
            getCacheBind() {}, // 组件事件绑定等收集
            getFieldDecorator() {}, // 装饰组件,促进双向绑定的修饰器
            getFieldProps() {} // 设置字段元数据,计算被修饰组件的属性
            ...
            
            render() {
                const { wrappedComponentRef, ...restProps } = this.props;
                const formProps = {
                  [formPropName]: this.getForm(), // createForm mixin
                };
          
                // 其中mapProps函数就是一个function(obj) {return obj};
                // 这里用了一个小技巧,就是call(this,xxx),直接将该组件上的核心方法,全都放到了子组件的属性上,而且由于该组件是createReactClass创建的,所以子组件(本例中的Form)调用这些从父组件获取的方法时,方法内部的this,指向当前组件。
                const props = mapProps.call(this, {
                  ...formProps,
                  ...restProps,
                });
                // 把form属性挂在到WrappedComponent属性上
                return <WrappedComponent {...props}/>;
              },
          },
        })
        // 复制包裹组件的静态属性到Form上
        return argumentContainer(Form, WrappedComponent);
    }
}
  • 产生一个新容器组件Form,内置getFieldDecorator、getFieldProps等属性和方法
  • 复制被包裹组件的静态属性到新的组建中,执行生命周期时间,getInitialState初始化默认的field,默认无
  • 最后返回被注入了Form组件的原始组件

getFieldDecorator

getFieldDecorator(name, fieldOption) {
    // 在getFieldProps中初始化store字段,绑定onChange事件以便后续方便做双向数据绑定
    const props = this.getFieldProps(name, fieldOption);
    //props: {value: "", ref: ƒ, onChange: ƒ}
    return (fieldElem) => { // 此处传入被修饰的input元素
      // fieldStore存储字段数据信息以及元数据信息。
      // 数据信息包括value,errors,dirty等
      // 元数据信息包括initValue,defaultValue,校验规则等。
      const fieldMeta = this.fieldsStore.getFieldMeta(name);
      // 获取input上本身绑定的属性,例如该例子中的onChange打印内容函数
      // originalProps属性的主要目的存储被封装表单项的onChange事件,fieldOption下无同类事件时,执行该事件  
      const originalProps = fieldElem.props;
      fieldMeta.originalProps = originalProps;
      fieldMeta.ref = fieldElem.ref;
      // clone input组件,并注入新的属性,onchange,value等
      return React.cloneElement(fieldElem, {
        ...props,
        ...this.fieldsStore.getFieldValuePropValue(fieldMeta),
      });
    };
    
  getFieldProps(name, usersFieldOption = {}) {
    const fieldOption = {
        name, // 自定义组件名称
        trigger: DEFAULT_TRIGGER, // 绑定默认的onChange事件
        valuePropName: 'value', // 默认值是value属性,checkBox的值为checked
        validate: [],
        ...usersFieldOption,
    };

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

    const fieldMeta = this.fieldsStore.getFieldMeta(name);
    
    const inputProps = {
        ...this.fieldsStore.getFieldValuePropValue(fieldOption),
        ref: this.getCacheBind(name, `${name}__ref`, this.saveRef),
    };

    //转换成数组格式
    const validateRules = normalizeValidateRules(validate, rules, validateTrigger);
    //validateRules [{"trigger":["onChange"],"rules":[{"required":true,"message":"What's your name?"}]}]
    const validateTriggers = getValidateTriggers(validateRules);
    validateTriggers.forEach((action) => {
        if (inputProps[action]) return;
        //绑定事件
        inputProps[action] = this.getCacheBind(name, action, this.onCollectValidate);
    });

    //FieldMeta值
    const meta = {
        ...fieldMeta,
        ...fieldOption,
        validate: validateRules,
    };

    // 设置FieldMeta
    this.fieldsStore.setFieldMeta(name, meta);
    
    return inputProps;
}

将表单项包装为高阶组件

  • 创建表单信息到fieldsStore
  • 绑定默认的onChange事件
    • 触发验证
    • 保存结果到fieldsStore
  • 返回双向数据绑定的input组件

在上述getFieldProps中onChange绑定了onCollect方法, 当change事件发生时,获取表单项的改变值,有校验规则的表单项添加{dirty:true}属性,调用validateFieldsInternal方法校验该表单项,将结果保存到fieldsStore,触发forceUpdate来重绘表单

onCollect(name_, action, ...args) {
        const { name, field, fieldMeta } = this.onCollectCommon(name_, action, args);
        const { validate } = fieldMeta;
        const newField = {
          ...field,
          dirty: hasRules(validate),
        };
        this.setFields({
          [name]: newField,
        });
      },
      

Form内部有自己的状态管理:fieldsStore记录着所有表单项的信息,通过getFieldDecorator和表单进行双向绑定。

onChange触发onCollect来改变fieldStore中的值并触发forceUpdate来更新,onCollectCommon方法内部展示了onCollect取值的细节,forceUpdate在更新组件后,触发render方法,接着又回到一开始getFieldDecorator中获取fieldStore内的值,返回被修改后的组件的流程。