react封装函数_封装React AntD的form表单组件

form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。

其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了，且在“封装react antd的表格table组件”一文中，我们也对相关技术作了简要介绍。接下来，再来介绍一下本次封装所用到的其他技术。

本次封装用到了useForm，官方解释：useForm是React Hooks的实现，只能用于函数组件。我们可以通过Form.useForm对表单数据域进行交互，如：setFieldsValue()、getFieldValue()、validateFields()、resetFields()等。

本次封装还用到了useEffect，它也是React Hooks的实现，相当于componentDidMount和componentDidUpdate以及componentWillUnmount这些生命周期的集合体，但需要注意react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数，但每次重新渲染都要执行一遍这些副作用函数，显然对于追求性能的我们来说是很不友好的，那该咋办呢？useEffect给我们提供了第二个参数，可用于定义其依赖的所有变量。如果其中一个变量发生变化，则useEffect会再次运行，如果包含变量的数组为空，则在更新组件时useEffect不会再执行，因为它不能监听到任何变量的变更。关于useEffect的介绍还有很多，可自行查阅API或资料，这里同样不再做过多的描述了。

另外本次封装同样是混合了JSX和createElement两种方式来创建虚拟DOM节点，如果你觉得混乱的话，可以使用其中一种方式的。

本次封装所使用到的方法的介绍基本完毕，以下是组件封装的具体实现部分。

还是先贴一张最后实现的效果图：

1、所封装的antd form组件form.js

import React, { createElement, useEffect, useImperativeHandle } from 'react'

import PropTypes from 'prop-types'

import { Form, Input, Select, DatePicker, Button } from 'antd';

import { timestampToTime } from "@/utils";

const FormItem = Form.Item, { Password } = Input, { Option } = Select, h = createElement;

const FormComponent = ({columns, data, cRef}) => {