Context 主要用于跨级组件通信。在实际开发中，Form 和 Field 之间可能会跨级，因此我们需要用 Context 来保证 Form 和 Field 的通信。Form 通过 context 将其 instance 方法和 formState 提供给 Field。
2、Field 和 Form 通信。
Form 组件会向 Field 组件提供一个 d__ispatch__ 方法，用于 Field 和 Form 进行通信。所有 Field 的状态和值都由 Form 统一管理。如果期望更新某个 Field 的状态或值，必须 dispatch 相应的 action。
3、表单元素和 Field 通信
表单元素和 Field 通信主要是通过回调函数。Field 会向表单元素提供 onChange，onBlur 等回调函数。
接口的设计
对于接口的设计来说，简单清晰是很重要的。所以 Field 只保留了必要的属性，没有将表单元素需要的其他属性通过 Field 透传下去，而是交给表单元素自己去定义。
通过 Child Render，将对应的状态和方法提供给子组件，结构和层级更加清晰了。
Field:
type TValidator = (value: string | boolean) => string | undefined; interface IFieldProps { children: (props: IFieldInnerProps)=> React.ReactNode; name: string; defaultValue?: any; validate?: TValidator | TValidator[]; }
Form:
interface IRxFormProps { children: (props: IRxFormInnerProps) => React.ReactNode; initialValues?: { [fieldName: string]: any; } }
到这里，一个最最基本的 Form 就完成了。接下来我们会在它的基础上进行一些扩展，以满足更多复杂的业务场景。
EnhanceFieldArray
FieldArray 主要用于渲染多组 Fields。
回到我们之前的那个问题，为什么要把 formState 的结构分为 fileds 和 values?
其实问题就出在 FieldArray，
初始长度由 initLength 或者 formValues 决定。
formState 整体更新。
FormValues
通过 RxJS，我们将 Field 更新的粒度控制到了最小，也就是说如果一个 Field 的 Value 发生变化，不会导致 Form 组件和其他 Feild 组件 rerender。
既然 Field 只能感知自己的 value 变化，那么问题就来了，如何实现 Field 之间的联动？
于是 FormValues 组件就应运而生了。
每当 formValues 发生变化，FormValues 组件会就把新的 formValues 通知给子组件。也就是说如果你使用了 FormValues 组件，那么每一次 formValues 的变化都会导致 FormValues 组件以及它的子组件 rerender，因此不建议大范围使用，否则可能带来性能问题。
总之，在使用 FormValues 的时候，最好把它放到一个影响范围最小的地方。也就是说，当 formValues 发生变化时，让尽可能少的组件 rerender。
在下面的代码中，FieldB 的显示与否需要根据 FieldA 的 value 来判断，那么你只需要将 FormValues 作用于 FIeldA 和 FieldB 就可以了。
<FormValues> {({ formValues, updateFormValues }) => ( <> <FieldA /> {!!formValues.A && <FieldB />} </> )} </FormValues>
FormSection
FormSection 主要是用于将一组 Fields group 起来，以便在复用在多个 form 中复用。主要是通过给 name添加前缀来实现的。
那么怎样给 Field 和 FieldArray 的 name 添加前缀呢？
我首先想到的是通过 React.Children 拿到子组件的 name，再和 FormSection 的 name 拼接起来。
但是，FormSection 和 Field 有可能不是父子关系！因为 Field 组件还可以被抽成一个独立的组件。因此，存在跨级组件通信的问题。
没错！跨级组件通信我们还是会用到 context。不过这里我们需要先从 FormConsumer 中拿到对应的 context value，再通过 Provider 将 prefix 提供给 Consumer。这时 Field/FieldArray 通过 Consumer 拿到的就是 FormSection 中的 Provider 提供的值，而不再是由 Form 组件的 Provider 所提供。因为 Consumer 会消费离自己最近的那个 Provider 提供的值。
<FormConsumer> {(formContextValue) => { return ( <FormProvider value={{ ...formContextValue, fieldPrefix: `${formContextValue.fieldPrefix || ""}${name}.`, }} > {children} </FormProvider> ); }} </FormConsumer>
测试Unit Test
主要用于工具类方法。
Integration Test
主要用于 Field，FieldArray 等组件。因为它们不能脱离 Form 独立存在，所以无法对其使用单元测试。