解绑UI，先看看好用的React表单校验库

表单校验对于前端来说无疑是个繁琐的事情，好在后台管理组件库例如Antd、Element帮我们解决了这些麻烦。可是对于C端说，UI设计师总会为网站定制个性的表单页面，这不得不需要我们切图搞起来。既然结构层和表示层需要我们亲自动手，而表单校验的行为层逻辑总是相似的，有没有一款好用又方便、又接地气又高逼格的库让我们解放双手呢？唉，还真有，那就是今天推荐的React-Hook-Form，Github上Star有30多k。看它的官方文档真是享受，因为它让我感觉原来组件还能这样封装，逻辑还能这样处理，格局打开了。有种醍醐灌顶的感觉，妈妈，原来我又会了。

基本用法

我们来看下它的基本用法

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

function Demo() {const { register, handleSubmit, formState: { errors } } = useForm();const onSubmit = handleSubmit((data) => console.log(data))return (
{errors.desc && {errors.desc.message}}
);
}

export default Demo; 
1
2
3
4
5
6

非常方便，只需要将使用register('name')注册一个name的表单项，并将返回值注入到input框中。如果input框是必填项，register方法提供第二个参数，register("desc", { required: "请输入描述" })。我们可以从formState.errors字段获取校验的错误信息进行显示。接着handleSubmit是一个高阶函数，可传入回调函数。handleSubmit(data => console.log(data))返回onSubmit函数，当我们触发onSubmit时可在回调函数中获取表单数据。

register还可以自定义校验规则，例如

register("name", {validate: (value) => {if (/^[A-Za-z]+$/i.test(value)) {return true;}return "只允许输入英文字母";},
}) 
1
2

当然，一些常用的min、max、minLength等校验属性都是可以直接使用。

你可能会好奇中register到底返回了哪些字段给到表单项，我们应该大概猜到无非就是onChange、value之类的属性，啀，还不完全定对。它返回的主要字段有name、onChange、onBlur、ref，没有value？没有！React Hook Form 注重减少重渲染以达到高性能的目的，采用非受控组件的方式。通过ref拿到input、select、textarea等原生组件节点来设置value值。

由于不需要特意使用useState来实时存储表单数据，因此我们输入框输入等操作时，并不会影响组件重新渲染。

formState监听表单状态

useForm还返回了formState字段，里面有校验错误信息、是否在校验、是否提交等等属性。

const {formState: { errors, isDirty, isValidating, isSubmitted// ...},
} = useForm(); 
1
2

这些属性被开发者使用且改变时，才会触发组件渲染，不使用时不会造成重渲染。什么意思呢？我们使用errors字段来看下区别。

没有使用errors字段，不会触发重渲染