介绍

formily/react里面放的是react相关组件，目的是将其和formily/core绑定状态

功能

• 实现Field
• 将form通过context传出去

FormProvider

作为最外层的组件，使用Formcontext向自组组件传递form

import React from 'react'
import { FormContext } from './context'

export default function FormProvider(props) {
  const {form,children} = props
  return (
    <>
  <FormContext.Provider value={form}>{children}</FormContext.Provider>
    </>
  )
}

formily/core来管理数据，将数据变成响应式等操作发生在form的onmount函数中 严格模式下，第二次渲染会使得input被卸载

  useEffect(() => {
    form.onMount()//涉及到挂载
    return () => {
          //严格模式下，第二次渲染会使得input被卸载
    // return () => {
    //   form.onUnmount()//卸载
    // }
    }
  })

Field

• component属性是其子组件
• decorator属性里面的formItem需要包裹Field

提供FieldContext给antd的FormItem

  const form = useContext(FormContext)
  const field = form.createField(props)

component是函数组件没有执行所以用createElement来执行一下（decorator同理），将value，onChange赋值变成受控组件

  const component = createElement(field.component[0],{...field.component[1],value:field.value,onchange:field.onInput})
  const decorator = createElement(field.decorator[0],field.decorator[1],component)

此时提交没用，输入也没用，期数就是组件没渲染，要用响应式 observer(Field)

useParentForm(hook)

import React, { useContext } from 'react'
import { FormContext } from './context';

export default function useParentForm() {
  const form = useContext(FormContext)//antdPage使用createForm创建form，通过FormProvider使用FormContext传递
  return form
}