“受控组件”的诅咒：为什么你需要 React Hook Form + Zod 来拯救你的键盘？

前言：你的手指累吗？

上一篇咱们聊了把 Tabs 状态放进 URL 里，这就好比给了你的应用一个"身份证"，走到哪都在。

但在这个 Tab 下面，往往藏着前端开发最大的噩梦------表单。

你是不是还在这么写代码？一个简单的注册页，你定义了 username, password, email, confirmPassword 四个 useState。然后写了四个 handleXxxChange 函数。每次用户敲一个键盘，React 就重新渲染一次组件（Re-render）。如果表单有 50 项，你在第一个输入框打字，整个页面卡得像是在放 PPT。

还有那个该死的校验逻辑：

javascript 复制代码

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 复制代码

  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 写法：

import 复制代码

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)

import 复制代码

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 复制代码

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，我们可以轻松实现拦截。

import 复制代码

// 一个简单的拦截 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 欺骗用户的眼睛，让无限列表像德芙一样纵享丝滑。