当前很多 UI 库都会为我们集成可复用的 Form 组件，并且是开箱即用。但有时候我们往往可能需要为自己的组件集成 Form。单纯的手动管理所有的状态可能不是件理想的活，尤其是表单验证。
React Hook Forms
为我们提供了完善的状态管理，并且可以集成到任何组件中去。
你可能会问，如今已经有了像是 MUI、Ant Design 等此类优秀的组件库，为什么还需要使用 React Hook Forms 来管理表单。
MUI: The React component library you always wanted
虽然一些优秀的成熟组件库会为我们提供良好的表单解决方案，但它终究需要与组件库一起使用。而并非只是提供表单的状态管理，并没有完全的与组件库解耦合。
同时，当我们使用诸如
Daisyui
等此类的 CSS 组件时，它们是与状态完全解耦合的。我们需要自己为其维护状态。
对于一个表单来说，提供的表单项越多，所需要的状态管理就越繁琐。不仅仅是状态管理，后续的表单验证才是一个表单的核心所在。
React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以在开发时验证表单类型。而表单的数据类型也是后续封装通用组件较为繁琐的一个地方。
import { useForm } from 'react-hook-form';
type Pet = 'Cat' | 'Dog';
type FormData = {
firstName: string;
lastName: string;
favorite: Pet;
export default function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>();
const onSubmit = handleSubmit((data) => console.log(data));
return (
<form onSubmit={onSubmit}>
<label htmlFor="firstname">First name:</label>
<input type="text" id="firstname" {...register('firstName')} />
</div>
<label htmlFor="lastname">Last name:</label>
<input type="text" id="lastname" {...register('lastName')} />
</div>
<label htmlFor="favorite">Favorite pet:</label>
<select id="favorite" {...register('favorite')}>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
</select>
</div>
<button>Submit</button>
</form>
</div>
}
