Skip to content

React Hook Form

高性能、灵活、易扩展、易于校验的表单库。

React Web

React Native

开发体验

直观且完备的API为开发人员提供最好的表单构建体验。

HTML标准

HTML标准

利用现有的HTML，并使用基于约束的API来校验您的表单。

超轻量

超轻量

包的体积同样重要。React Hook Form是无任何依赖的超轻量库。

高性能

高性能

最大程度减少重渲染次数、更快速的挂载以提供最佳的用户体验。

适应性强

适应性强

由于表单的状态就在本地，因此无须任何依赖即可应用状态。

奖状

荣获2020年GitNation React OS Productivity Booster奖。

库代码比较

减少您必须编写的代码量是 React Hook Form 的主要目标之一。 为了说明这一点，让我们来简单对比下目前最流行的表单校验库。

⚠ 注意：以下 Formik 和 Redux-Form 代码片段都引用自官方文档。

React Hook Form

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

const Example = () => {
  const { handleSubmit, register, errors } = useForm();
  const onSubmit = values => console.log(values);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register("email", {
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message}

      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message}

      <button type="submit">Submit</button>
    </form>
  );
};
Barcode

区隔组件的重渲染

您可以区隔组件的重渲染，从而为网页或应用提供更好的性能。下面的例子展示了这种行为。

注意：在输入框中输入，以查看渲染行为。

React Hook Form

Child Component A
Child Component B
Child Component C

VS

Controlled Form

Child Component A
Child Component B
Child Component C

监听输入值变化

构建表单时，性能对用户体验是非常重要的一部分。您可以监听的独立的输入值变化而无须重渲染整个表单。

Barbell

减少渲染次数

您曾经考虑过用户会触发多少次组件的重渲染吗？React Hook Form 优先采用非受控的表单验证，以减少不必要的性能损耗。

共计重渲染次数: 3

共计重渲染次数: 30+

更快的挂载

下方的截图展示了使用 React Hook Form 时的组件挂载会快多少。在库代码对比中，它的挂载和渲染速度比使用 Formik 大约快13%，比 Redux Form 大约快25%。⚠ 注意： 跑分是在6x CPU下的Chrome开发工具模拟得到的。

React Hook Form

  • 安装的次数(s): 1
  • 提交更改的次数(s): 1
  • 总时间: 1800ms
React Hook Form performance

Others

  • 安装的次数(s): 6
  • 提交更改的次数(s): 1
  • 总时间: 2070ms
Formik performance
  • 安装的次数(s): 17
  • 提交更改的次数(s): 2
  • 总时间: 2380ms
Redux Form performance

Highlights

This project is getting recognized by the community and industry. It's helping more developers to build forms in React than ever.

The Community

Build and drive by the community. On a mission to make every React developer's life easier when it comes to building forms.

现场演示

下面的表单演示了表单校验的操作。 每一列都展示了自定义hook中捕获到的数据。 您也可以通过单击编辑按钮来更改表单项。

例子

or

监听

ⓘ 更改输入值以监听值的变化

{}

错误

ⓘ 校验的错误将出现在这里

触碰过的
ⓘ 触碰过的表单项名称展示在这里
[]
尝试一下?
表单构建不应该充满痛苦。React Hook Form 将使您编写更少的代码并具有更好的性能。