React Forms — Formik vs. Hook-Form vs. Final-Form

各位程序员朋友们好！

表单是所有应用程序的关键组成部分，无论是用户注册、登录还是收集调查问卷，都离不开它。表单看似简单，实则不然。本文旨在比较最常用的几种React 表单，并分析它们的优缺点，同时提供代码示例：[此处Formik应列出几种表单类型]。对于新手来说，React是一个非常流行的 JavaScript 库，用于编写交互式用户界面，由 Facebook 开发。React-Hook-FormReact-Final-Form

感谢阅读！ - 内容由App Generator提供。

本资料涵盖以下主题：

✅ 为什么我们需要forms？
✅ 简介React（简短版）
✅ Formik：优点、缺点和示例
✅ React-Hook-Form：优点、缺点和示例
✅ React-Final-Form：优点、缺点和示例
✅ 结论与资源
✅ 免费React Sample：浆果（使用 Formik）
✅ 免费React Sample：Datta Able（使用 Formik）

`PROMO`🚀 SeRanking -`All-in-one SEO Software`

屡获殊荣的 SEO 工具，助力您的业务发展 -定价从每月 25 美元起。

✅100% accurate关键词rank tracking
✅ 深入website audit
✅Backlink checking及监控
✅ 关键词研究

✨ 为什么我们需要表格

如上所述，表单看似简单易写，但并非所有情况下都是如此。表单需要验证用户提供的信息，而且在项目的不同部分编写多个表单可能会非常耗时。为了解决这个问题，我们可以使用Form Libraries built on top of React开源生态系统中发布的工具，例如Formik`React-FinalForm`。

上述所有库都易于使用，并且具备我们项目中可能需要的所有功能。

我们只需安装并快速配置我们首选的库即可。之后，我们就能更快地编写项目中所需的所有表单，从而将更多时间投入到应用程序的实际业务逻辑开发中。

✨ 什么是 React

React 是一个开源的 UI 库，由 Facebook 开发和维护。React 将大型应用程序拆分成称为组件的更小部分。这种基于组件的方法使 React 更易于使用和维护。

你会发现 React 不是一个框架，而是一个库。这意味着它并不是一个完整的解决方案。

New to React?请查看这份全面的React 入门指南。

使用 React 构建应用程序时，您需要使用其他外部库来完成应用程序。React 的这种特性使其更加强大，因为您可以自由选择应用程序所需的任何库。

您可能需要使用的库示例包括：AxiosHTTP 请求库、Redux状态管理库、React-router-dom路由库和React-hook-form表单构建库。

✨ 为什么选择合适的表单库？

为你的应用选择合适的表单库至关重要，因为有些库体积庞大、运行缓慢，而且存在大量样板代码或缺乏支持等问题。这些问题都会使库的使用变得困难。
因此，你必须谨慎选择适合应用的表单库。那么，事不宜迟，让我们深入了解一下三大顶级 React 表单库的优缺点。

我们先从……开始Formik。

✨ Formik

Formik是一个开源的 React 表单库，由Jared PalmarJared 开发。Jared 开发Formik它的初衷是，当他需要为自己的应用程序构建 30 多个表单时，感到十分沮丧。他想要一种标准化的方法来构建和管理应用程序中的所有表单。为此，他开发了Formik。

这个库可以帮助你处理构建表单时最烦人但又最重要的三个部分：

👉 获取表单状态的输入和输出值
👉 验证和错误消息
👉 处理表单提交

<Formik />您可以使用 Formik 的 `<form>` 、 `<form>` <Form />、<Field />`<form>` 和`<form>` 组件轻松构建表单<ErrorMessage />。使用 Formik 构建表单非常简单。稍后，我将在本节中向您展示如何使用 Formik 构建表单并进行验证。
在此之前，让我们先来看看 Formik 的一些优缺点。

福米克专业

声明式组件（，，）
Github 上超过 29k 个星标
与流行的验证库集成：是的
支持外部用户界面库。

福米克公司

7 个依赖项，12.7大小为 kB
500+GH上的问题
没有内置验证
与 React-hook-form 相比，需要编写大量样板代码。

既然我们已经了解了 Formik 的优点和缺点，让我们用 `Formik 构建一个简单的表单来更清楚地说明这一点。

安装 Formik

要使用 Formik 创建表单，首先需要安装它。我们可以使用以下命令进行安装：

$ npm install formik
// OR
$ yarn add formik

表单源代码

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';

const Basic = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      onSubmit={async (values) => {
        await new Promise((r) => setTimeout(r, 500));
        alert(JSON.stringify(values, null, 2));
      }}
    >
      <Form>
        <label htmlFor="firstName">First Name</label>
        <Field id="firstName" name="firstName" placeholder="Jane" />

        <label htmlFor="lastName">Last Name</label>
        <Field id="lastName" name="lastName" placeholder="Doe" />

        <label htmlFor="email">Email</label>
        <Field
          id="email"
          name="email"
          placeholder="jane@acme.com"
          type="email"
        />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

ReactDOM.render(<Basic />, document.getElementById('root'));

如您所见，这是一个简单的表单。我们还没有添加验证功能。我将在下一节中添加。

为了构建表单，我们调用了该<Formik>组件。它接受两个属性：一个initialValues是定义输入字段初始值的对象，onSubmit另一个是处理表单提交的方法。

正如你所看到的，这个表单是自声明式的。这意味着代码描述了正在发生的事情。你不需要花费太多精力就能理解它。

基本表单完成后，下一步是添加验证和约束，要求用户输入相关信息。

👉 表单验证Formik

开发 Formik 的原因之一是为了简化表单验证流程。Formik 支持同步和异步验证，Form-level并且Field-level validation通过 Yup 提供基于模式的表单级验证Yup。Yup 是一个非常流行的表单验证库。

👉 表单级验证
👉 字段级验证

这就是全部内容。一个完整的表单，使用 [工具名称] 构建Formik。如需更多资源，请访问：

✨ React Hook 表单

React-Hook-Form是一个基于 React Hooks 构建的表单库。该库采用了一种不同的表单构建方式，通过使用不受控组件来隔离组件的重新渲染。

与不同Formik，它没有任何依赖项。而且大小只有（压缩后 + gzip 压缩后）React-Hook-Form的一半。Formik8.6KB

React Hook Form 可以减少你需要编写的代码量，同时避免不必要的重新渲染。React-hook-form 使用标准的基于 HTML 的方法来验证表单。你可以使用 hook 轻松地用 React-hook-form 构建表单useForm。稍后我会在文章中演示具体操作方法。

但现在让我们来看看它的一些优点和缺点React Hook Form。

React-Hook-Form 的优点

更少的样板代码，零依赖
Github 上没有问题（什么？）
大小为 8.6kb（已压缩并采用 gzip 压缩）
Out-of-the-box与 UI 库集成
支持原生 HTML 表单验证
支持Yup表单验证。

React-Hook-Form Cons

您需要使用 Yup 或内置表单验证。

安装 React-Hook-Form

$ npm install react-hook-form
// OR
$ npm install react-hook-form

React-Hook-Form — 示例

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

const HookForm = () => {
    const { register, handleSubmit } = useForm();
    const handleRegistration = (data) => console.log(data);

    return (
      <div>
        Hook Form
    <form onSubmit={handleSubmit(handleRegistration)}>
      <div>
        <label>Email</label>
        <input type="email" name="email" {..register('email')} />
       </div>
       <div>
          <label>Password</label>
          <input type="password" name="pass" {..register('pass')} />
        </div>
        <button>Submit</button>
    </form>
      </div>
    );
};

`handleSubmit` 方法处理表单提交，而 `register` 方法则帮助你将输入字段注册到 React Hook Form 中，以便进行验证并跟踪其值的变化。
这是一个基本表单。现在让我们看看如何使用 react-hook-form 验证表单：

表单验证React-Hook-Form

React Hook Form 使用原生 HTML 表单验证来验证表单。要使用此功能进行验证，您需要将验证规则传递给 register 方法。

验证规则如下：

required：表示该字段是否为必填项。
minlength并maxlength设置字符串输入值的最小和最大长度
min并max设置数值的最小值和最大值
pattern：接受一个正则表达式模式来测试输入。

以下是验证表单的示例React-hook-form：

export default function App() {    
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {..register("firstName", { required: true, maxLength: 20 })} />
      <input {..register("lastName" , { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {..register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

正如你所看到的，这只是验证的初始化过程。我们需要一种方法向用户显示错误信息。

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

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}

      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}

      <input type="submit" />
    </form>
  );
}

如需更多相关资源，React-hook-form请访问：

✨ React 最终形态

React-Final-Form是一个轻量级的库封装Final-Form。除了 Final Form 之外，它没有任何其他依赖项，而且体积非常小，大约只有 3.3kb（已压缩和 gzip 处理）。

您可以使用 React Final Form 的 Form 和 Field 组件轻松构建表单React-Final-Form。稍后我将向您展示具体操作方法。

React-Final-Form 的优点

仅渲染已更改的输入
仅3.2kb（已压缩并gzip处理）
6k+Github 上的星星

React-Final-Form 缺点

具有对等依赖项：Final Form。
很多boilerplate code
350+Github 上的问题

安装 React-Final-Form

$ npm install final-form react-final-form
// OR 
$ yarn final-form react-final-form

要构建表单，您需要从以下位置导入表单和字段组件react-final-form。

表单示例源代码

import { Form, Field } from 'react-final-form'

import React from 'react'
import { render } from 'react-dom'
import Styles from './Styles'
import { Form, Field } from 'react-final-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const onSubmit = async values => {
  await sleep(300)
  window.alert(JSON.stringify(values, 0, 2))
}

const App = () => (
  <Styles>
    <h1>React Final Form - Simple Example</h1>

    <Form
      onSubmit={onSubmit}
      initialValues={{ firstname: '', lastname :''}}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>First Name</label>
            <Field
              name="firstName"
              component="input"
              type="text"
              placeholder="First Name"
            />
          </div>
          <div>
            <label>Last Name</label>
            <Field
              name="lastName"
              component="input"
              type="text"
              placeholder="Last Name"
            />
          </div>

          <div className="buttons">
            <button type="submit" disabled={submitting || pristine}>
              Submit
            </button>
            <button
              type="button"
              onClick={form.reset}
              disabled={submitting || pristine}
            >
              Reset
            </button>
          </div>
        </form>
      )}
    />
  </Styles>
)

render(<App />, document.getElementById('root'))

如您所见，此表单几乎与Formik表单相同。要构建表单，

组件接受 3 个 props initialValues：，handleSubmit和render。

这是一个使用 React Final Form 构建的基本表单，没有进行验证。React Final Form 的验证方式有两种，就像 Formik 一样。

👉 表单级验证
👉 字段级验证

由于验证代码模式与 Formik 非常相似，我们暂时省略示例。有关 React Final Form 的更多信息，请访问：

✨ 那么，你应该选择哪一个呢？

选择表单库应取决于您正在构建的项目类型。不过，在选择表单库时，也有一些通用的要点需要考虑。

经过所有这些比较，如果我现在要开始一个项目，我会选择，因为它与和React-Hook-Form相比没有依赖项，样板代码也更少。React-Final-FormFormik

FormikReact-Final-FormReact-Hook-Form 的表单看起来更简洁直观，而其他表单则显得复杂。此外，它提供的验证功能React-Hook-Form代码更少。

最终，您可以根据自己的项目需求自由选择Formik。React-Final-Form这完全取决于您的个人喜好。

很抱歉这篇文章这么长。对于坚持读完的读者，下一节将介绍几个使用生产就绪型React 的产品React Forms。

✨ React Berry（使用`Formik`）

Berry 是一款基于 Material-UI 构建的创意 React 控制面板。它旨在提供最佳用户体验，拥有高度可定制且功能丰富的页面。Berry 是一款颠覆性的 React 控制面板，在 Retina 显示屏或笔记本电脑上均采用简单直观的响应式设计。

👉 React Node JS Berry — 产品页面
👉 React Node JS Berry — 在线演示

该产品采用简单的 JWT 身份验证流程：login/ register/logout由开源 Node JS API 后端通过Passport库提供支持。

✨ React Datta Able — (使用`Formik`)

Datta Able 是一款开源的 React 后台管理面板，提供色彩丰富且现代的设计。Datta Able React Free 是市面上所有后台管理模板中最具风格的免费 React 后台管理模板。

👉 React Node Datta Able — 产品页面
👉 React Node Datta Able — 在线演示

文章来源：https://dev.to/sm0ke/react-forms-formik-vs-hook-form-vs-final-form-c1e

菜单

分享

React Forms — Formik vs. Hook-Form vs. Final-Form

React Forms — Formik vs. Hook-Form vs. Final-Form

`PROMO`🚀 SeRanking -`All-in-one SEO Software`

✨ 为什么我们需要表格

✨ 什么是 React

✨ 为什么选择合适的表单库？

✨ Formik

✨ React Hook 表单

✨ React 最终形态

✨ 那么，你应该选择哪一个呢？

✨ React Berry（使用`Formik`）

✨ React Datta Able — (使用`Formik`)

系统设计面试中的 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 代码

分享

React Forms — Formik vs. Hook-Form vs. Final-Form

React Forms — Formik vs. Hook-Form vs. Final-Form

PROMO🚀 SeRanking -All-in-one SEO Software

✨ 为什么我们需要表格

✨ 什么是 React

✨ 为什么选择合适的表单库？

✨ Formik

✨ React Hook 表单

✨ React 最终形态

✨ 那么，你应该选择哪一个呢？

✨ React Berry（使用Formik）

✨ React Datta Able — (使用Formik)

`PROMO`🚀 SeRanking -`All-in-one SEO Software`

✨ React Berry（使用`Formik`）

✨ React Datta Able — (使用`Formik`)