📝React Hooks 实现自定义表单

前景

在我们的平常业务代码开发中，其实要实现自己自定义的一个表单这种场景是非常多的(就像我们封装组件一样)，封装的组件或表单能大大加强我们开发的效率和代码的复用，下面我们就用Hooks的方式实现自己的一个表单组件。下面是基于antd4表单实现的方式，antd3表单实现的方式是基于高阶组件的方式实现的，会有个问题，比如说个别组件数据发生变化会导致整个Form表单重新渲染，antd4改进了这个问题

原理及实现思路

我们都知道antd中是用一个Form组件来包裹整个表单,然后再通过FormItem组件来包裹我们的input，在FormItem组件上通过添加name,rules等属性来将里面的组件变成受控组件,我们就不用在input上面再添加value或者onChang事件来控制了，然后我们在Form组件上通过一个叫useForm的hook函数来获取form的实例将实例放在Form组件上，再通过一个 onFinish 方法来获取我们表单的数据

index组件实现

Form组件实现

FormItem组件实现

useForm实现

FormContext组件实现

具体调用

在页面调用时，写了两种调用的方法(hook方式和类组件的方式,默认时hook，类组件的我注释掉了)