tanstack-form 是做什么的？
无头、高性能且类型安全的表单状态管理库，支持 TS/JS、React、Vue、Angular、Solid、Lit 和 Svelte。
概述
TanStack Form 是一个用于管理表单状态的库，它采用“无头”架构，即不提供任何预制的 UI 组件，而是提供一组强大的 Hooks 和工具函数。这使得开发者可以完全自由地设计表单的外观和行为，同时享受出色的性能、类型安全和可扩展性。无论你使用的是哪种主流前端框架，TanStack Form 都能提供一致的 API 和开发体验。
主要特性
- 无头设计：不绑定任何 UI 库，你可以使用任意组件或原生 HTML 元素来构建表单。
- 类型安全：完全基于 TypeScript 构建，提供精确的类型推断，减少运行时错误。
- 高性能：仅更新必要的部分，避免不必要的重新渲染，确保大型表单也能流畅运行。
- 多框架支持：官方支持 React、Vue、Angular、Solid、Lit、Svelte 以及纯 TS/JS。
- 灵活的验证：支持同步/异步验证、字段级验证、表单级验证以及自定义验证器。
- 丰富的插件生态：提供字段数组、表单订阅等插件，满足复杂场景需求。
快速开始
安装
选择你正在使用的框架，安装对应的包：
# React
npm install @tanstack/react-form
# Vue
npm install @tanstack/vue-form
# Angular
npm install @tanstack/angular-form
# Solid
npm install @tanstack/solid-form
# Svelte
npm install @tanstack/svelte-form
# Lit
npm install @tanstack/lit-form
基础用法 (React 示例)
import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
function MyForm() {
const form = useForm({
defaultValues: {
name: '',
email: '',
},
onSubmit: async ({ value }) => {
// 处理表单提交
console.log(value)
},
// 使用 Zod 适配器进行验证
validatorAdapter: zodValidator(),
})
return (
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<form.Field
name="name"
validators={{
onChange: z.string().min(3, '名字至少需要3个字符'),
}}
children={(field) => (
<div>
<input
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors && (
<span>{field.state.meta.errors.join(', ')}</span>
)}
</div>
)}
/>
<button type="submit">提交</button>
</form>
)
}
使用场景
- 需要完全控制表单 UI 样式的项目。
- 多框架共存或需要统一表单管理方案的大型应用。
- 对表单性能要求极高的复杂数据录入场景。
- 希望利用 TypeScript 类型系统来保证数据一致性的开发团队。