开发体验
直观、功能齐全的 API 在构建表单时为开发者提供无缝体验。
高性能、灵活、可扩展的表单,且具有易于使用的校验。
直观、功能齐全的 API 在构建表单时为开发者提供无缝体验。
利用现有的 HTML 标记并使用我们基于约束的验证 API 来验证你的表单。
包的大小很重要。 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)}><inputtype="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 中构建表单。
React Hook Form 已经成熟并围绕钩子发展。 简化了 React 开发的一部分。
2020 年 GitNation React OS 生产力助推器类别奖得主。
该项目很幸运地受到了语言和框架部分的关注。
以下表单演示了表单验证的实际操作。 每列代表自定义钩子中捕获的内容。 你还可以通过单击“编辑”按钮来更改表单中的字段。
ⓘ Change inputs value to update watched values
{}
ⓘ Validation errors will appear here
ⓘ Touched fields will display here
[]
表单处理并不一定很痛苦。 React Hook Form 将帮助你编写更少的代码,同时获得更好的性能。