登录
“受控组件”的诅咒：为什么你需要 React Hook Form + Zod 来拯救你的键盘？
前言：你的手指累吗？
上一篇咱们聊了把 Tabs 状态放进 URL 里，这就好比给了你的应用一个“身份证”，走到哪都在。
但在这个 Tab 下面，往往藏着前端开发最大的噩梦——表单。
你是不是还在这么写代码？
一个简单的注册页，你定义了 username, password, email, confirmPassword 四个 useState。
然后写了四个 handleXxxChange 函数。
每次用户敲一个键盘，React 就重新渲染一次组件（Re-render）。
如果表单有 50 项，你在第一个输入框打字，整个页面卡得像是在放 PPT。
还有那个该死的校验逻辑：
if (!email.includes('@')) { ... }
if (password.length < 8) { ... }
if (password !== confirmPassword) { ... }
这些 if-else 像面条一样缠绕在你的组件里。写到最后，你都不知道自己是在写 UI 还是在写逻辑判断。
兄弟，放下你手里的 useState。是时候引入 React Hook Form 和 Zod 这对“黄金搭档”了。
观念重塑：受控 vs 非受控
React 官方文档早期教我们要用“受控组件”（Controlled Components），也就是 value 绑定 state，onChange 更新 state。
但这在复杂表单场景下，简直是性能杀手。
React Hook Form (RHF) 的核心哲学是回归 HTML 的本质：非受控组件（Uncontrolled Components） 。 它利用 ref 直接接管原生 DOM 元素。
- 你打字时，React 不 渲染。
- 只有校验报错或提交时，React 才介入。
这就好比，以前你是傀儡师，手要把着每一个木偶的关节动（受控）；现在你给了木偶一个指令“往前走”（非受控），它自己就走了，你只管终点。
实战演练：从 50 行代码缩减到 10 行
假设我们要写一个带有校验的用户表单。
❌ 痛苦的传统写法（useState）：
const [values, setValues] = useState({ name: '', age: 0 });
const [errors, setErrors] = useState({});
const handleChange = (e) => {
// 1. 更新状态（触发重渲染）
setValues({ ...values, [e.target.name]: e.target.value });
// 2. 还要在这里手写校验逻辑，或者等提交时校验
// ...逻辑省略，已经想吐了
};
return (
<form>
<input name="name" value={values.name} onChange={handleChange} />
<input name="age" value={values.age} onChange={handleChange} />
</form>
);
};
✅ 爽翻天的 RHF 写法：
const BetterForm = () => {
// register: 注册器，相当于 ref + onChange 的语法糖
// handleSubmit: 帮你处理 `e.preventDefault` 和数据收集
// formState: 所有的错误状态都在这
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => console.log(data); // data 直接就是 {name:..., age:...}
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* 也就是一句话的事 */}
<input {...register("name", { required: true })} />
{errors.name && <span>名字必填</span>}
<input {...register("age")} />
<button type="submit">提交</button>
</form>
);
};
看到没有？没有 useState，没有 handleChange。 register 函数给你的 Input 注入了原本需要手写的 name, onBlur, onChange, ref。一切都在黑盒里自动完成了。
灵魂伴侣：Zod 登场
RHF 解决了数据收集和性能问题，但校验规则如果写在 JSX 里（比如 { required: true, minLength: 10 }），还是很乱。
这时候，你需要 Zod。 Zod 是一个 TypeScript 优先的 Schema 声明库。简单说，就是把校验逻辑从 UI 里抽离出来，变成一份“说明书” 。
1. 定义说明书 (Schema)
const schema = z.object({
username: z.string().min(2, "名字太短了，再长点"),
email: z.string().email("这根本不是邮箱"),
age: z.number().min(18, "未成年人请绕道").max(100),
// 甚至可以做复杂的依赖校验
password: z.string().min(6),
confirm: z.string()
}).refine((data) => data.password === data.confirm, {
message: "两次密码不对啊兄弟",
path: ["confirm"], // 错误显示在 confirm 字段下
});
2. 连接 RHF 和 Zod
我们需要一个“中间人”：@hookform/resolvers。
import { zodResolver } from '@hookform/resolvers/zod';
const BestForm = () => {
const {
register,
handleSubmit,
formState: { errors, isDirty } // isDirty 很有用！
} = useForm({
resolver: zodResolver(schema) // ✨ 注入灵魂
});
return (
<form onSubmit={handleSubmit(saveData)}>
<input {...register("username")} />
<p className="text-red-500">{errors.username?.message}</p>
{/* ...其他字段... */}
<button type="submit">提交</button>
</form>
);
};
现在，你的 JSX 极其干净。所有的校验逻辑都在 schema 对象里。想改规则？去改 schema 就行，不用动组件。
回应开头：防止“手滑关网页”
还记得前言里说的那个悲剧吗？用户填了一半，手滑关了 Tab。
RHF 提供了一个神属性：isDirty（表单是否被弄脏了/是否被修改过）。
配合 React Router 的 useBlocker (v6.x) 或者传统的 window.onbeforeunload，我们可以轻松实现拦截。
// 一个简单的拦截 Hook
const usePreventLeave = (isDirty) => {
useEffect(() => {
const handleBeforeUnload = (e) => {
if (isDirty) {
e.preventDefault();
// 现代浏览器通常不支持自定义文本，但这会触发浏览器的默认弹窗
e.returnValue = '';
}
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [isDirty]);
};
// 在组件里使用
const MyForm = () => {
const { formState: { isDirty } } = useForm();
// 只要用户改了一个字，isDirty 就变成 true，防守模式开启
usePreventLeave(isDirty);
return <form>...</form>;
}
现在，只要用户动了表单，试图关闭或刷新页面时，浏览器就会弹出一个无情的警告框：“您有未保存的更改，确定要离开吗？”。 PM 再也不用担心用户投诉数据丢了。
总结
React Hook Form + Zod 是现代 React 开发的“工业标准”。
- RHF 负责 DOM 交互和性能优化，让你的页面丝滑顺畅。
- Zod 负责数据结构和逻辑校验，保证你的数据干净可靠。
- TypeScript 自动推导类型，让你写代码有自动补全。
当你熟练掌握这一套组合拳，你会发现写表单不再是折磨，甚至有一种解压的快感。
好了，我要去把那个嵌套了 10 层 if-else 校验的屎山给重构了。
下期预告：表单数据量如果不止 50 项，而是 10,000 项呢？ 比如一个超长的“用户管理列表”，或者一个即时滚动的“日志监控台”。如果你把这 10,000 个
div直接渲染出来，浏览器会直接死机。 下一篇，我们来聊聊 “虚拟滚动 (Virtual Scrolling) 技术” 。教你如何用react-window欺骗用户的眼睛，让无限列表像德芙一样纵享丝滑。
