🔥 2024 年开发 React.js 表单的 5 个最佳库

我在公司使用 React 已经有一段时间了，主要负责开发面向消费者和后台的各种应用，涵盖多个行业。我们经常需要处理各种复杂程度的表单。为了缩短表单开发时间，公司推荐我们使用 React Hook Form 表单库（一个表单库）。我一直想知道是否有更好的替代方案，但由于工作性质，之前一直没有时间去研究。所以在年底的空闲时间，我终于抽出一些时间来研究不同的表单库。

本文将探讨五个常用的 React.js 表单库：React Hook Form、Formik、Ant Design (AntD)、TanStack 和 React Final Form。每个库都有其独特的功能和特性，因此适用于不同类型的项目和应用场景。

使用 React PDF 为您的 React 应用注入强大功能

在深入探讨表单库之前，先简单介绍一下我正在进行的项目。React PDF是一个功能强大的库，可以直接在 React 应用中渲染和自定义 PDF 文档。它拥有丰富的功能，包括主题自定义、本地化和响应式布局，让 PDF 集成变得轻而易举。

如果你的项目涉及处理 PDF 文件，无论是报告、文档还是仪表盘，不妨了解一下React PDF。它旨在让任何 React 环境中的 PDF 处理都变得快速便捷。

为什么表格很重要？

表单是 Web 应用程序的重要组成部分，React.js 项目也不例外。它们使用户能够分享信息、完成任务并提供反馈。如果没有表单，许多我们在 Web 上习以为常的操作，例如登录、注册或购物，都将无法实现。此外，表单还可以利用各种库提供的功能，非常有效地管理组件状态和组件响应。因此，对于希望构建引人入胜的交互式 Web 应用程序的开发者来说，学习如何创建高效且用户友好的表单至关重要。

React Hook 表单

React Hook Form (RHF) 易于使用，并且由于它基于 React Hooks 构建，因此开发者只需编写极少的样板代码。它是一个轻量级的软件包，拥有简洁易用的 API，主要关注性能和减少重新渲染。它既可以使用受控输入（状态），也可以使用非受控输入（引用），这使得 RHF 比其他库更加灵活。

主要特点

轻松创建和管理表单
您可以使用 RHF 库轻松创建和管理表单。这几乎不需要任何编码，并减少了状态管理的需求。
内置验证机制
React Hook 表单提供了遵循现有 HTML 表单验证标准的 API 选项，您也可以创建自己的验证规则。

以下是使用 RHF 库开发一个基本表单的示例。

import { useCallback } from "react"; 
import { useForm } from "react-hook-form"; 

export const RHF = () => { 
  const { 
    register, 
    handleSubmit, 
    getValues, 
    formState: { errors }, 
  } = useForm(); 

  const onSubmit = useCallback(() => { 
    console.log(getValues()); 
  }, [getValues]); 

  return ( 
    <> 
      <h2>React Hook Form</h2> 
      <form onSubmit={handleSubmit(onSubmit)}> 
        <label htmlFor="firstname">First name</label> 
        <div> 
          <input 
            placeholder="First name" 
            {...register("firstname", { required: "this field is required" })} 
          /> 
        </div> 
        <div className="error-message">{errors.firstname?.message}</div> 
        <label htmlFor="lastname">Last name</label> 
        <div> 
          <input 
            placeholder="Last name" 
            {...register("lastname", { required: "this field is required" })} 
          /> 
        </div> 
        <div className="error-message">{errors.lastname?.message}</div> 
        <button type="submit">Submit</button> 
      </form> 
    </> 
  ); 
};

福米克

Formik 是一款开源工具，旨在提高 React 应用中表单状态管理、提交处理和表单验证的效率。例如，传统上，我们在 React 中处理表单的方式是为每个表单字段创建一个 useState() hook，添加事件监听器并单独更新字段。而 Formik 则负责处理所有这些逻辑；我们只需导入其组件，即可轻松访问表单数据。值得注意的是，尽管 Formik 在过去两年中停止了维护，但它在 2023 年底才重新获得维护。

主要特点

轻松生成表单
表单、字段和错误消息只是 Formik 附带的众多工具和组件中的几个，它们提供了一种简单易懂的方法来配置和控制表单状态。
表单验证
虽然有很多方法可以利用 Formik 来验证表单，但您也可以使用 JavaScript 函数或基本的 HTML 输入验证参数，例如 required 和 minlength。
使用 Yup 集成复杂的验证模式
Yup 是一个 JavaScript 模式构建器，可以处理值解析和验证，并且可以与 Formik 集成。这使得创建复杂的验证规则和自定义错误消息成为可能，从而改进表单验证过程。

以下是使用 Formik 库开发基本表单的示例。

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

const SignUpSchema = Yup.object().shape({ 
  firstName: Yup.string().required("This field is required"), 
  lastName: Yup.string().required("This field is required"), 
}); 

export const FormikForm = () => ( 
  <div className="formik-form"> 
    <h2>Formik</h2> 
    <Formik 
      initialValues={{ 
        email: "", 
        firstName: "", 
        lastName: "", 
      }} 
      validationSchema={SignUpSchema} 
      onSubmit={(values) => { 
        setTimeout(() => { 
          alert(JSON.stringify(values, null, 2)); 
        }, 500); 
      }} 
      render={({ errors, touched }) => ( 
        <Form> 
          <label htmlFor="firstName">First name</label> 
          <div> 
            <Field name="firstName" placeholder="First name" type="text" /> 
            <ErrorMessage 
              name="firstName" 
              component="div" 
              className="error-message" 
            /> 
          </div> 

          <label htmlFor="lastName">Last name</label> 
          <div> 
            <Field name="lastName" placeholder="Last name" type="text" /> 
            <ErrorMessage name="lastName"> 
              {(msg) => <div className="error-message">{msg}</div>} 
            </ErrorMessage> 
          </div> 
          <button type="submit">Submit</button> 
        </Form> 
      )} 
    /> 
  </div> 
);

蚂蚁设计（AntD）

AntD 是一个全球第二大最受欢迎的 UI 框架，因为它提供了高质量的 React 组件，包括一套内置的 TypeScript 表单和验证功能。与本文提到的其他库不同，AntD 是一个完整的 UI 库，提供了一套全面的设计元素以及表单和验证功能。它支持多种浏览器、服务器端渲染和 Electron 环境。与其他需要额外插件或扩展才能实现某些功能的 UI 库不同，AntD 将所有这些关键特性都集成到了其核心框架中。

主要特点

表单创建工具
AntD 提供各种数据输入元素，例如输入框、单选按钮、复选框等，从而实现不同的表单设计。
表单验证
通过应用全面的验证规则来维护数据的完整性。
CSS-in-JS 技术：
它在设计中使用了 CSS-in-JS 技术，以实现动态和混合主题功能，从而实现更灵活的样式管理。

这里使用 AntD 库，是一个基本表单的开发示例。

import { Button, Form, Input, Flex } from "antd"; 

export const Antd = () => { 
  const onFinish = (values) => { 
    console.log(values); 
  }; 

  return ( 
    <Flex vertical> 
      <h2>Ant Design</h2> 
      <Form 
        name="normal_login" 
        initialValues={{ remember: true }} 
        onFinish={onFinish} 
      > 
        <Form.Item 
          name="firstname" 
          rules={[{ required: true, message: "This field is required" }]} 
        > 
          <Input placeholder="First name" /> 
        </Form.Item> 
        <Form.Item 
          name="lastname" 
          rules={[{ required: true, message: "This field is required" }]} 
        > 
          <Input placeholder="Lastname" /> 
        </Form.Item> 

        <Form.Item> 
          <Button 
            type="primary" 
            htmlType="submit" 
            className="login-form-button" 
          > 
            Submit 
          </Button> 
        </Form.Item> 
      </Form> 
    </Flex> 
  ); 
};

坦斯塔克

TanStack 不仅仅是一个库，它实际上是一套高度可靠的开源库。它为 Web 开发人员提供了一系列无头、类型安全且功能强大的实用工具，例如状态管理、路由、数据可视化、图表和表格，而不仅仅专注于 UI 组件。

主要特点

TanStack Forms 的表单创建功能
让创建表单布局变得轻松便捷。表单可以包含不同类型和结构的字段，并且可以在表单中动态添加或删除字段。
TanStack的表单验证功能
提供了一组预定义的验证规则，可应用于表单字段以确保数据完整性。此外，它还允许实现自定义验证逻辑，从而使开发人员能够定义复杂的验证标准。

以下是使用 TanStack 库开发的基本表单示例。

import { useForm } from "@tanstack/react-form"; 

function FieldInfo({ field }) { 
  return ( 
    <> 
      {field.state.meta.touchedErrors ? ( 
        <div className="error-message">{field.state.meta.touchedErrors}</div> 
      ) : null} 
      {field.state.meta.isValidating ? "Validating..." : null} 
    </> 
  ); 
} 

export function TanStack() { 
  const form = useForm({ 
    defaultValues: { 
      firstName: "", 
      lastName: "", 
    }, 
    onSubmit: async ({ value }) => { 
      setTimeout(() => { 
        alert(JSON.stringify(value, null, 2)); 
      }, 500); 
    }, 
  }); 

  return ( 
    <div className="tanstack-form"> 
      <h2>TanStack</h2> 
      <form.Provider> 
        <form 
          onSubmit={(e) => { 
            e.preventDefault(); 
            e.stopPropagation(); 
            void form.handleSubmit(); 
          }} 
        > 
          <div> 
            <form.Field 
              name="firstName" 
              validators={{ 
                onChange: ({ value }) => 
                  !value ? "This field is required" : undefined, 
              }} 
              children={(field) => { 
                return ( 
                  <> 
                    <label htmlFor={field.name}>First name</label> 
                    <div> 
                      <input 
                        id={field.name} 
                        name={field.name} 
                        value={field.state.value} 
                        onBlur={field.handleBlur} 
                        placeholder="First name" 
                        onChange={(e) => field.handleChange(e.target.value)} 
                      /> 
                    </div> 
                    <FieldInfo field={field} /> 
                  </> 
                ); 
              }} 
            /> 
          </div> 
          <div> 
            <form.Field 
              name="lastName" 
              validators={{ 
                onChange: ({ value }) => 
                  !value ? "This field is required" : undefined, 
              }} 
              children={(field) => ( 
                <>
                  <label htmlFor={field.name}>Last name</label> 
                  <div> 
                    <input 
                      id={field.name} 
                      name={field.name} 
                      value={field.state.value} 
                      onBlur={field.handleBlur} 
                      placeholder="Last name" 
                      onChange={(e) => field.handleChange(e.target.value)} 
                    /> 
                  </div> 
                  <FieldInfo field={field} /> 
                </> 
              )} 
            /> 
          </div> 
          <form.Subscribe 
            selector={(state) => [state.canSubmit, state.isSubmitting]} 
            children={([canSubmit, isSubmitting]) => ( 
              <button type="submit" disabled={!canSubmit}> 
                {isSubmitting ? "..." : "Submit"} 
              </button> 
            )} 
          /> 
        </form> 
      </form.Provider> 
    </div> 
  ); 
}

React 最终形态

React Final Form 提供了一种简洁的方式来处理表单状态和验证，并将对性能的影响降至最低。它是 Final Form 的一个封装，没有任何依赖项。它遵循观察者设计模式，组件订阅特定事件，从而减少重新渲染次数，而不是重新渲染整个表单。这类似于 React 中的 useEffect() hook，用于监听表单值。React Final Form 已预先配置好，只需极少的配置即可提供验证、状态管理和事件处理功能。

主要特点

React Final Form表单验证
支持多种验证方法以及自定义验证引擎。总体而言，它提供两种类型的验证：

**字段级验证**：当表单中的任何字段发生更改时，都会运行此验证。
- 表单级验证：此验证在表单提交时运行。
表单创建
您可以使用组件轻松设置 React Final 表单，它还提供内置输入类型、动态字段、向导表单、自定义组件创建以及与其他 UI 库的集成。
高效的数据管理
该库还会加载、规范化、保存和重新初始化表单数据，以维护原始/脏状态并管理复杂的表单工作流程。

以下是使用 React Final Form 库开发的基本表单示例。

import React from "react"; 
import { Form, Field } from "react-final-form"; 

const onSubmit = async (values) => { 
  console.log(values); 
}; 

export const ReactFinalForm = () => ( 
  <div className="react-final-form"> 
    <h2>React Final Form</h2> 
    <Form 
    onSubmit={onSubmit}     
    validate={(values) => {     
      const errors = {};      
      console.log(values);      
      if (!values.firstname) {       
        errors.firstname = "This field is required";      
      }      
      if (!values.lastname) {      
        errors.lastname = "This field is required";       
      }       
      return errors;     
    }}     
    render={({ submitError, handleSubmit, submitting }) => (     
      <form onSubmit={handleSubmit}>       
        <Field name="firstname">         
        {({ input, meta }) => (        
          <div>           
            <label htmlFor="firstname">First name</label>           
            <div>             
              <input {...input} type="text" placeholder="First name" />               
            </div>           
            <div className="error-message">             
              {meta.touched ? meta.error || meta.submitError : ""}            
            </div>          
          </div>        
        )}         
        </Field>      
        <Field name="lastname">        
        {({ input, meta }) => (        
          <div>          
            <label htmlFor="lastname">Last name</label>        
            <div>            
              <input {...input} placeholder="Last name" />           
            </div>         
            <div className="error-message">          
              {meta.touched ? meta.error || meta.submitError : ""}         
            </div>           
          </div>         
        )}         
        </Field>       
      {submitError && <div className="error">{submitError}</div>}      
        <div className="buttons">         
          <button type="submit" disabled={submitting}>           
          Submit           
          </button>        
        </div>      
      </form>    
    )}  
  />  
  </div>
);

比较这五个图书馆

结论

选择合适的库取决于具体的项目需求，正如我们的分析中所强调的。考虑每个库的优势可以帮助您找到最适合您项目的库。务必结合项目实际情况来考虑每个库的优势。

RHF—— 如果您想要速度快、操作简单且零依赖性，请选择 RHF。
Formik—— 如果您想要一个经过实践检验、拥有庞大用户社区且近期更新显著提升了维护效率的表单管理解决方案，那么 Formik 是您的理想之选。
TanStack—— 如果您需要一个功能全面的工具包来处理复杂的表单系统和状态管理，并且希望它能在一个模块化且强大的生态系统中运行，那么TanStack是一个不错的选择。
React Final Form - 最适合以性能为中心、需要轻量级表单、灵活验证和最少依赖项的项目。
AntD - 如果您正在寻找一个包含各种现成组件（包括强大的表单元素和验证功能）的全面 UI 框架，以实现统一的界面开发，那么请选择 AntD。

就我个人而言，我会继续使用 RHF，直到出现性能和/或功能显著更优的产品为止。不过，每个人的情况都不一样，我希望我的探索能为你提供一个良好的起点。如需了解更多信息，你可以查阅官方文档，这将有助于你了解哪种工具更适合哪种场景。这样的研究将帮助你节省时间，并简化表单开发流程。

使用 React PDF 让 PDF 处理变得轻松便捷

如果您觉得这篇文章对您的表单开发有所帮助，那么千万不要错过 React 工具包中的另一个必备工具：React PDF。无论您是在构建仪表盘还是管理文档，React PDF都能让您轻松显示和自定义 PDF 文件，无需任何繁琐的操作。它速度快、对开发者友好，并且能够处理复杂的 PDF 需求，同时保持了灵活性和轻量级。

快来看看它如何简化您下一个项目中的 PDF 处理！

文章来源：https://dev.to/react-pdf/5-best-libraries-to-develop-reactjs-forms-2024-49k3

菜单

分享

🔥 2024 年开发 React.js 表单的 5 个最佳库

🔥 2024 年开发 React.js 表单的 5 个最佳库

使用 React PDF 为您的 React 应用注入强大功能

为什么表格很重要？

React Hook 表单

主要特点

福米克

主要特点

蚂蚁设计（AntD）

主要特点

坦斯塔克

主要特点

React 最终形态

主要特点

比较这五个图书馆

结论

使用 React PDF 让 PDF 处理变得轻松便捷

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码