finalform相关和源码

[cisen]

说明

• react-final-form依赖final-form，https://github.com/final-form/react-final-form
• 总结就一个字段订阅，然后绑定到react的生命周期。比较简单
• https://github.com/cisen/sourcecode-finalform

[cisen]

源码

流程

final-form

final-form的，总的来说就是一个发布订阅模块，只是变量很多

• 解构createForm的config参数，初始化全局state数据
• 添加各个操作state的闭包方法
• 执行初始化runValidation校验initialData数据的合法性
• 返回api数据
• filed还封装了input的事件，比如onBlur

react-final-form-hooks

• 主要的作用是使用hooks封装final-form
• 然后初始化final-form，缓存配置数据
• 然后让react的生命周期订阅final-form的改变
• 监听配置变化并同步到final-form

问答

• this.form是什么？ 相当于一个store，可以被订阅和发布

好东西学习

export const ReactFinalFormContext = React.createContext(null)

export const getDisplayName = Component => {
  const displayName = Component.displayName || Component.name || 'Component'

  return `ReactFinalForm(${displayName})`
}
// 一个高阶组件
export const withReactFinalForm = Component => {
  return class extends React.Component {
    // 返回一个组件，组件的名字还可以自己定义
    static displayName = getDisplayName(Component)

    render() {
    // 这样相当于直接生成context用
    /* <ThemeContext.Consumer>
      {theme => (
      <div><div>)
      }
</ThemeContext.Consumer>
*/
      return React.createElement(ReactFinalFormContext.Consumer, {
       // reactFinalForm是context直接传下来的
        children: reactFinalForm =>
          // 传给子组件
          React.createElement(Component, {
            reactFinalForm,
            ...this.props
          })
      })
    }
  }
}

[cisen]

数据结构

createForm的config

let {
    debug,
    destroyOnUnregister,
    keepDirtyOnReinitialize,
    initialValues,
    mutators,
    onSubmit,
    validate,
    validateOnBlur
  } = config

createForm返回的api结构如下

const api: FormApi = {
  batch: (fn: () => void) => {
  },
  blur: (name: string) => {
  },
  change: (name: string, value: ?any) => {
  },
  focus: (name: string) => {
  },
  mutators: mutatorsApi,
  getFieldState: name => {
  },
  getRegisteredFields: () => Object.keys(state.fields),
  getState: () => calculateNextFormState(),
  initialize: (data: Object | ((values: Object) => Object)) => {
  },
  isValidationPaused: () => validationPaused,
  pauseValidation: () => {
  },
  registerField: (
    name: string,
    subscriber: FieldSubscriber,
    subscription: FieldSubscription = {},
    fieldConfig?: FieldConfig
  ): Unsubscribe => {
  },
  reset: (initialValues = state.formState.initialValues) => {
  },
  resumeValidation: () => {
  },
  setConfig: (name: string, value: any): void => {
  },
  submit: () => {
  },
  subscribe: (
    subscriber: FormSubscriber,
    subscription: FormSubscription
  ): Unsubscribe => {
  }
}

createFrom闭包初始化的state数据

const state: InternalState = {
    subscribers: { index: 0, entries: {} },
    fieldSubscribers: {},
    fields: {},
    formState: {
      dirtySinceLastSubmit: false,
      errors: {},
      initialValues: initialValues && { ...initialValues },
      invalid: false,
      pristine: true,
      submitting: false,
      submitFailed: false,
      submitSucceeded: false,
      valid: true,
      validating: 0,
      values: initialValues ? { ...initialValues } : {}
    },
    lastFormState: undefined
  }

每个field的数据结构

state.fields[name] = {
          active: false,
          blur: () => api.blur(name),
          change: value => api.change(name, value),
          data: {},
          focus: () => api.focus(name),
          isEqual: (fieldConfig && fieldConfig.isEqual) || tripleEquals,
          lastFieldState: undefined,
          modified: false,
          name,
          touched: false,
          valid: true,
          validateFields: fieldConfig && fieldConfig.validateFields,
          validators: {},
          visited: false
        }