跳到内容

React Hook Form

高性能、灵活且可扩展的表单，并提供易于使用的验证功能。

React 网页

React Native

DX

直观、功能完备的 API，为开发者在构建表单时提供无缝体验。

HTML 标准

利用现有的 HTML 标记，并使用我们基于约束的验证 API 来验证你的表单。

超轻量级

包大小很重要。React Hook Form 是一个没有依赖项的小型库。

性能

最大程度地减少重新渲染次数，最大程度地减少验证计算，并加快挂载速度。

可采用

由于表单状态本质上是本地的，因此可以轻松地采用它而无需其他依赖项。

UX

努力提供最佳的用户体验，并带来一致的验证策略。

支持和背书

Casino ReviewsBEEKAI Form builderroute4metwicsy

更少的代码。更高效

React Hook Form 减少了你需要的代码量，同时消除了不必要的重新渲染。现在深入了解并使用以下示例进行探索。

React Hook Form

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


const Example = () => {
  const { handleSubmit, register, formState: { 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>
  );
};

隔离重新渲染

你可以隔离组件重新渲染，这将提高你的页面或应用程序的性能。以下示例演示了这一点。

React Hook Form

子组件 A
子组件 B
子组件 C

VS

受控表单

子组件 A
子组件 B
子组件 C

订阅

性能是构建表单时用户体验的重要方面。你将能够订阅单个输入和表单状态更新，而无需重新渲染整个表单。

更快的挂载速度

以下屏幕截图展示了与其他库相比，React Hook Form 的组件挂载速度快多少。

React Hook Form

  • 挂载次数: 1
  • 提交更改次数: 1
  • 总时间: 1800ms
React Hook Form performance

其他

  • 挂载次数: 6
  • 提交更改次数: 1
  • 总时间: 2070ms
Formik performance
  • 挂载次数: 17
  • 提交更改次数: 2
  • 总时间: 2380ms
Redux Form performance

亮点

这个项目正受到社区和行业的认可。它正在帮助越来越多的开发人员构建 React 表单。

JavaScript 新星

React Hook Form 已经成熟并在 hook 周围发展。简化了 React 开发的一部分。

React 开源奖

2020 年 GitNation React OS 奖生产力助推器类别得主。

技术雷达

该项目有幸在语言和框架部分被雷达关注。

社区

由社区构建和驱动。我们的使命是让每个 React 开发人员在构建表单时更容易。

这就是重点。一个 React 表单库，既经过深思熟虑，又足够灵活，在你需要时可以让你摆脱困境。在与 React 表单斗争多年后，切换到 react-hook-form 感觉就像拥有了超能力。一切运行得更快，我的代码更简洁。

在使用 react-hook-form 的帮助下，构建 React 应用程序时，创建表单不再那么复杂。我经常使用这个包来创建表单，因为这里的验证非常简单。当我停止使用 formika 时，它对我来说是最好的表单制作工具。非常好的用户界面，性能也很好。

我使用过的最好的 React 表单库，因为它实用且简单。它有很多有用的工具，与 Formik 和 Redux Form 相比，它不需要太多代码。由于应用程序中的重新渲染次数很少，挂载时间也很短，因此它非常流畅。

实时演示

以下表单演示了表单验证的实际应用。每列代表自定义 hook 中捕获的内容。你还可以通过单击**编辑**按钮来更改表单中的字段。

示例

或

观察

ⓘ更改输入值以更新观察到的值

{}

错误

ⓘ验证错误将出现在这里

已触碰
ⓘ已触碰的字段将显示在这里
[]
准备好了吗？
表单处理不必很痛苦。React Hook Form 将帮助你编写更少的代码，同时获得更好的性能。
入门API
编辑