我比较了使用 react-hook-form 和不使用 react-hook-form 的情况

React Hook Form是什么？

React Hook Form是一个用于在React应用程序中轻松处理表单的库。
与传统的表单库不同，React Hook Form可以轻松进行表单数据验证和错误处理，并具有更高的速度和性能。

使用react-hook-form的好处。

パフォーマンスの向上

react-hook-formでは、フォームデータの状態を手動で更新する必要がないため、再レンダリングが最小限に抑えられます。これにより、フォームのパフォーマンスが向上します。

簡単なバリデーションの実装

react-hook-formでは、簡単なバリデーションルールを指定するだけで、フォームのバリデーションを実装できます。バリデーションエラーが発生した場合には、自動的にエラーメッセージが表示されます。

フォームデータの管理が簡単

react-hook-formでは、フォームデータの状態を手動で管理する必要がないため、フォームの状態管理が簡単になります。また、フォームデータの状態は、Reactの状態管理ライブラリ（useStateなど）を使用するよりも効率的に管理できます。

カスタムコンポーネントとの連携が簡単

react-hook-formは、カスタムコンポーネントとの連携が簡単です。カスタムコンポーネントを使用することで、フォームの見た目を自由に設定することができます。

柔軟なAPI

react-hook-formには、柔軟なAPIが用意されています。たとえば、フォームのバリデーションルールをカスタマイズしたり、フォームデータをJSON形式で出力することもできます。また、React Nativeで使用することもできます。

如果不使用React Hook Form的話，以下是一个示例代码。

只要理解了React的基本概念，这段代码就很容易理解，但是handleSubmit的逻辑变得冗长。
此外，需要准备与输入值相对应的useState。

import React, { useState } from "react";

function ContactForm() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [firstNameError, setFirstNameError] = useState("");
  const [lastNameError, setLastNameError] = useState("");

  const validateName = (name) => {
    const regex = /^[A-Za-z]+$/;
    return regex.test(name);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!validateName(firstName)) {
      setFirstNameError("First name must contain only letters");
    } else {
      setFirstNameError("");
    }

    if (!validateName(lastName)) {
      setLastNameError("Last name must contain only letters");
    } else {
      setLastNameError("");
    }

    if (validateName(firstName) && validateName(lastName)) {
      console.log({ firstName, lastName });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        type="text"
        name="firstName"
        id="firstName"
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
      />
      {firstNameError && <span>{firstNameError}</span>}

      <label htmlFor="lastName">Last Name</label>
      <input
        type="text"
        name="lastName"
        id="lastName"
        value={lastName}
        onChange={(e) => setLastName(e.target.value)}
      />
      {lastNameError && <span>{lastNameError}</span>}

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

export default ContactForm;

使用React Hook Form时的示例代码。

使用 react-hook-form 需要掌握的知识是必要的
相较于上述代码，不需要编写 handleSubmit 和 useState 的逻辑，使代码更易读。

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

function ContactForm() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">First Name</label>
      <input
        type="text"
        name="firstName"
        id="firstName"
        ref={register({ required: true, maxLength: 20 })}
      />
      {errors.firstName && errors.firstName.type === "required" && (
        <span>This field is required</span>
      )}
      {errors.firstName && errors.firstName.type === "maxLength" && (
        <span>Max length exceeded</span>
      )}

      <label htmlFor="lastName">Last Name</label>
      <input
        type="text"
        name="lastName"
        id="lastName"
        ref={register({ required: true, maxLength: 20 })}
      />
      {errors.lastName && errors.lastName.type === "required" && (
        <span>This field is required</span>
      )}
      {errors.lastName && errors.lastName.type === "maxLength" && (
        <span>Max length exceeded</span>
      )}

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

export default ContactForm;