表单库

React 生态中有多个优秀的表单库，各有不同的设计哲学和适用场景。选择合适的表单库能显著提升开发效率和应用性能。

一、主流表单库对比

特性	Ant Design Form	Formik	React Hook Form
体积	较大	轻量	最小
性能	中等	良好	最优（非受控）
学习成本	中等	低	较高
验证方式	内置规则	Yup 集成	多种支持
中文文档	完善	有	较少
适用场景	企业级	快速开发	高性能需求

二、Ant Design Form

官方表单组件，集成了 Ant Design 设计规范，适合企业级项目。

优点

组件丰富、功能完善
中文文档和社区支持好
集成验证和错误提示
与 Ant Design 其他组件配合紧密

缺点

包体积较大
样式定制相对复杂

基础示例

import { Form, Input, Button, message } from 'antd'

function LoginForm() {
  const [form] = Form.useForm()

  const onFinish = (values: any) => {
    console.log('表单值:', values)
    message.success('提交成功')
  }

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder="输入用户名" />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password placeholder="输入密码" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" block>
          登录
        </Button>
      </Form.Item>
    </Form>
  )
}

三、Formik

轻量级表单库，API 简单直观，适合快速开发。

优点

学习成本低，API 清晰
体积小，集成灵活
支持 Yup、Joi 等验证库
易于与自定义 UI 组件结合

缺点

没有内置 UI 组件，需要自己搭建
样式和验证提示需要手动处理

基础示例

import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const validationSchema = Yup.object({
  email: Yup.string().email('邮箱格式错误').required('邮箱必填'),
  password: Yup.string().min(6, '密码至少 6 位').required('密码必填'),
})

function FormikForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log('表单值:', values)
      }}
    >
      <Form>
        <div>
          <label htmlFor="email">邮箱</label>
          <Field id="email" name="email" type="email" />
          <ErrorMessage name="email" component="div" />
        </div>

        <div>
          <label htmlFor="password">密码</label>
          <Field id="password" name="password" type="password" />
          <ErrorMessage name="password" component="div" />
        </div>

        <button type="submit">提交</button>
      </Form>
    </Formik>
  )
}

四、React Hook Form

基于 Hook 的高性能表单库，采用非受控组件方案，性能最优。

优点

性能最好，最小化重新渲染
包体积最小
基于原生 HTML 表单
支持多种验证方式

缺点

学习曲线相对较陡
需要理解非受控组件概念
中文资源较少

基础示例

import { useForm } from 'react-hook-form'

interface FormData {
  username: string
  email: string
  age: number
}

function HookForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    defaultValues: { username: '', email: '', age: 0 },
  })

  const onSubmit = (data: FormData) => {
    console.log('表单值:', data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="username">用户名</label>
        <input
          id="username"
          {...register('username', { required: '用户名必填' })}
        />
        {errors.username && <span>{errors.username.message}</span>}
      </div>

      <div>
        <label htmlFor="email">邮箱</label>
        <input
          id="email"
          {...register('email', {
            required: '邮箱必填',
            pattern: {
              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
              message: '邮箱格式错误',
            },
          })}
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <button type="submit">提交</button>
    </form>
  )
}

五、选择建议

企业级项目 → Ant Design Form

完善的中文生态和组件库
内置验证和样式方案
与 Ant Design 设计体系集成

快速迭代项目 → Formik

上手快，API 简洁
灵活搭配自定义 UI
文档清晰易懂

高性能需求 → React Hook Form

最小包体积，最优性能
减少不必要的重新渲染
适合复杂表单场景

选择原则：企业级项目优先 Ant Design Form 因为生态完善，快速开发选 Formik 因为上手快，性能敏感的项目选 React Hook Form 因为它最优。根据项目规模、团队背景、性能要求来判断。

一、主流表单库对比

二、Ant Design Form

三、Formik

四、React Hook Form

五、选择建议

On this page