𝗕𝘂𝗹𝗹𝗲𝘁𝗽𝗿𝗼𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺𝘀: 𝗭𝗼𝗱 & 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗙𝗼𝗿𝗺

表单是 B2B SaaS 产品的核心驱动力。

大多数开发者构建表单的方式都是错误的。他们使用受控组件（controlled components）。这意味着他们将每个输入框都绑定到一个 useState hook 上。

这会引发性能问题。

如果你的表单有 20 个字段，每输入一个字母都会触发整个表单的重新渲染。输入一个包含 10 个字母的名字，就会强制进行 10 次完整的重新渲染。这会导致你的应用在低端设备上运行缓慢。

手动校验也是一个问题。为每个字段编写 "if" 语句非常混乱，而且缺乏 TypeScript 的类型安全保障。

你需要一种更好的方法。

使用 React Hook Form 和 Zod 来解决这个问题。

React Hook Form 通过 HTML refs 使用非受控输入（uncontrolled inputs）。数据保留在 DOM 中。表单仅在必要时（例如出现错误时）才会重新渲染。

Zod 负责处理校验。它定义了数据的精确结构（shape）。

以下是工作流程：

  1. 定义一个 Zod schema。它作为你的单一事实来源（single source of truth），同时提供运行时校验和 TypeScript 类型。

  2. 使用 zodResolver。它将 React Hook Form 与你的 Zod schema 连接起来。

  3. 使用 register 函数。它将你的输入框连接到表单，而不会触发频繁的重新渲染。

优势：

  • 输入零延迟。大型表单依然保持流畅。
  • 类型安全。你的数据符合 API 的预期。
  • 代码更少。你不再需要编写手动的校验逻辑。

不要再与 React state 作斗争了。使用 refs 和 schemas 来构建专业的表单。

来源：https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j