表单写到想摔键盘？聊聊前端常见的复杂状态场景

yuki_uix
0 阅读10分钟

写表单这件事，我相信大多数前端开发者都经历过类似的心路历程：最开始觉得不就是几个 <input> 吗，然后需求一条条加进来——验证、错误提示、提交状态、字段依赖……代码量呈指数级膨胀，最后一个"简单"的注册表单能写到 200 行😓。

这篇文章是我在反复踩坑之后的一些思考和总结，聊聊表单状态为什么难，以及如何用工具优雅地解决它。

问题的起源

表单的本质是"用户输入 → 程序处理 → 反馈"，看起来很简单。但难就难在，它不只是存储状态，还涉及：

  • 验证：什么时候验证？失焦时？实时？提交时？
  • 依赖：字段 A 的值影响字段 B 的显示或规则
  • 性能：大表单每次输入都触发重渲染，用户感知到卡顿
  • 副作用：异步验证（检查用户名是否已存在）、草稿自动保存

把这些叠加在一起，表单就成了前端状态管理中最复杂的场景之一。

从简单到失控：原生 useState 的演进

最开始的样子

刚入门时，受控组件 + useState 几乎是所有人的第一选择：

// 环境：React
// 场景：简单的登录表单

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="password"
      />
      <button type="submit">login</button>
    </form>
  );
}

两个字段，二十行代码，清晰直观。然后设计上要求："加个用户名，加个确认密码，加个验证……"

加入验证后的样子

当需要处理验证、错误提示、touched 状态和提交状态时，代码量会爆炸式增长：

// 环境：React
// 场景：带验证的注册表单

function SignupForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
  });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const validate = (name, value) => {
    switch (name) {
      case 'username':
        if (!value) return 'username is required';
        if (value.length < 3) return 'username must be at least 3 characters';
        break;
      case 'email':
        if (!value) return 'email is required';
        if (!/\S+@\S+.\S+/.test(value)) return 'invalid email format';
        break;
      case 'password':
        if (!value) return 'password is required';
        if (value.length < 6) return 'password must be at least 6 characters';
        break;
      case 'confirmPassword':
        if (value !== formData.password) return 'passwords do not match';
        break;
    }
    return '';
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
    if (touched[name]) {
      setErrors((prev) => ({ ...prev, [name]: validate(name, value) }));
    }
  };

  const handleBlur = (e) => {
    const { name, value } = e.target;
    setTouched((prev) => ({ ...prev, [name]: true }));
    setErrors((prev) => ({ ...prev, [name]: validate(name, value) }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const newErrors = {};
    Object.keys(formData).forEach((key) => {
      const error = validate(key, formData[key]);
      if (error) newErrors[key] = error;
    });

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      setTouched(
        Object.keys(formData).reduce((acc, key) => ({ ...acc, [key]: true }), {})
      );
      return;
    }

    setIsSubmitting(true);
    try {
      await submitForm(formData);
    } catch (err) {
      console.error(err);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 每个字段都要重复这套结构 */}
      <div>
        <input
          name="email"
          value={formData.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {touched.email && errors.email && (
          <span className="error">{errors.email}</span>
        )}
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'submitting...' : 'sign up'}
      </button>
    </form>
  );
}

这段代码已经接近 120 行，而且每加一个字段就要同步修改好几个地方。更大的问题是：验证逻辑和组件耦合在一起，性能也有隐患——每次输入都会触发整个组件重渲染。

如果再加上多步骤、动态字段、异步验证……用 useState 就基本走到头了。

受控 vs 非受控：性能背后的设计取舍

理解为什么表单库要这样设计，首先要搞清楚受控和非受控的区别。

受控组件：React 完全掌管 input 的值，每次输入都触发 setState，进而触发重渲染。

非受控组件：值存在 DOM 中，React 只在需要时通过 ref 读取，输入时不触发重渲染。

// 环境：React
// 场景：两种组件的对比演示

// 受控组件：每次按键触发 setState + 重渲染
function ControlledInput() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// 非受控组件：输入时不触发重渲染，提交时读取 ref
function UncontrolledInput() {
  const inputRef = useRef();
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  return <input ref={inputRef} defaultValue="" />;
}

对于一两个字段，受控组件完全没问题。但如果表单有 50 个字段，每次按键都重渲染整个组件，性能问题就会变得明显。

这也是 React Hook Form 的核心设计思路：默认使用非受控组件，只在必要时订阅特定字段的变化。输入时不触发重渲染，只有调用 watch() 订阅的字段变化时才会更新。

验证时机：影响用户体验的关键细节

验证"对不对"是基本要求，验证"在什么时候告诉用户"才是用户体验的关键。

image.png 一种推荐的渐进式验证策略：

时机触发条件用户体验
用户还在输入，未 blur不验证不打断用户思路
用户 blur 离开字段触发验证及时反馈错误
已经 blur 过，继续修改实时验证修改即反馈
点击提交全量验证兜底检查

React Hook Form 通过 mode 参数控制验证时机，mode: 'onBlur' 是我觉得体验最好的选项。

React Hook Form vs Formik：怎么选？

市面上主流的两个表单库，设计理念有明显差异。

Formik 以受控组件为基础，状态完全托管在 JavaScript 中，思路和 Redux 类似，比较"React 范儿"。

React Hook Form 以非受控组件为基础，最小化重渲染，性能优先，API 也更简洁。

来看看同一个注册表单，两种库怎么写：

// 环境：React
// 场景：基础注册表单对比

// Formik 写法
import { Formik, Form, Field } from 'formik';

function FormikSignup() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={(values) => {
        const errors = {};
        if (!values.email) errors.email = 'required';
        return errors;
      }}
      onSubmit={(values) => console.log(values)}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="email" />
          {touched.email && errors.email && <div>{errors.email}</div>}
          <button type="submit">submit</button>
        </Form>
      )}
    </Formik>
  );
}

// React Hook Form 写法
import { useForm } from 'react-hook-form';

function RHFSignup() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    mode: 'onBlur',
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register('email', {
          required: 'email is required',
          pattern: { value: /\S+@\S+.\S+/, message: 'invalid email' },
        })}
      />
      {errors.email && <div>{errors.email.message}</div>}
      <button type="submit">submit</button>
    </form>
  );
}

代码量上，React Hook Form 明显更简洁。在性能上，差距更大——Formik 在字段较多时，每次输入都会重渲染整个表单；React Hook Form 默认不重渲染。

我的理解是，如果是新项目从零开始，React Hook Form 是更好的默认选择；如果团队已经在用 Formik，不需要专门切换。

复杂场景实战

场景一：多步骤表单

多步骤表单的关键是：步骤间共享状态，切换步骤前验证当前步骤。

// 环境：React + React Hook Form
// 场景：三步注册流程

import { useForm, FormProvider, useFormContext } from 'react-hook-form';

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const methods = useForm({
    defaultValues: {
      username: '',
      email: '',
      address: '',
      city: '',
    },
  });

  const stepFields = {
    1: ['username', 'email'],
    2: ['address', 'city'],
  };

  const handleNext = async () => {
    // 只验证当前步骤的字段
    const isValid = await methods.trigger(stepFields[step]);
    if (isValid) setStep((s) => s + 1);
  };

  const onSubmit = (data) => {
    console.log('final submit:', data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {step === 1 && <Step1 />}
        {step === 2 && <Step2 />}

        <div>
          {step > 1 && (
            <button type="button" onClick={() => setStep((s) => s - 1)}>
              previous
            </button>
          )}
          {step < 2 ? (
            <button type="button" onClick={handleNext}>
              next
            </button>
          ) : (
            <button type="submit">submit</button>
          )}
        </div>
      </form>
    </FormProvider>
  );
}

function Step1() {
  const { register, formState: { errors } } = useFormContext();
  return (
    <div>
      <input {...register('username', { required: 'required' })} placeholder="username" />
      {errors.username && <span>{errors.username.message}</span>}
      <input {...register('email', { required: 'required' })} placeholder="email" />
      {errors.email && <span>{errors.email.message}</span>}
    </div>
  );
}

FormProvider + useFormContext 的组合让子组件可以直接访问表单实例，不需要逐层传 props。

场景二：动态字段

添加/删除联系人这类场景，useFieldArray 是专门为此设计的：

// 环境：React + React Hook Form
// 场景：可动态添加删除的联系人列表

import { useForm, useFieldArray } from 'react-hook-form';

function DynamicFieldsForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: {
      contacts: [{ name: '', phone: '' }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'contacts',
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`contacts.${index}.name`, { required: 'required' })}
            placeholder="name"
          />
          <input
            {...register(`contacts.${index}.phone`, { required: 'required' })}
            placeholder="phone"
          />
          <button type="button" onClick={() => remove(index)}>
            remove
          </button>
        </div>
      ))}

      <button
        type="button"
        onClick={() => append({ name: '', phone: '' })}
      >
        add contact
      </button>

      <button type="submit">submit</button>
    </form>
  );
}

field.id 是 useFieldArray 自动生成的稳定 ID，用作 key 比用数组下标更可靠。

场景三：表单草稿自动保存

长表单刷新丢失内容体验极差，自动保存草稿是一个值得标配的功能：

// 环境：React + React Hook Form
// 场景：编辑器类表单，刷新不丢失

const DRAFT_KEY = 'article_draft';

function PersistentForm() {
  const { register, handleSubmit, watch, reset } = useForm({
    defaultValues: () => {
      const saved = localStorage.getItem(DRAFT_KEY);
      return saved ? JSON.parse(saved) : { title: '', content: '' };
    },
  });

  const formData = watch();

  // 防抖自动保存，避免频繁写入
  useEffect(() => {
    const timer = setTimeout(() => {
      // 注意：不要保存敏感字段（如密码）
      localStorage.setItem(DRAFT_KEY, JSON.stringify(formData));
    }, 1000);
    return () => clearTimeout(timer);
  }, [formData]);

  const onSubmit = (data) => {
    console.log('submit:', data);
    localStorage.removeItem(DRAFT_KEY); // 提交成功后清除草稿
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('title')} placeholder="title" />
      <textarea {...register('content')} placeholder="content" />
      <button type="submit">submit</button>
    </form>
  );
}

有一个细节值得注意：密码、支付信息这类敏感字段不应该存入 localStorage，自动保存时需要手动过滤。

AI 辅助表单开发：哪里能信任，哪里要警惕

最近越来越多地用 AI 辅助写代码，表单这个场景有些值得分享的观察。

AI 做得好的事情：

生成基础表单结构和验证规则，AI 的质量相当高。你给一个清晰的需求，它能输出 90% 可用的代码。对于常见的模式（注册表单、搜索表单、多选表单），AI 基本不会出错。

AI 容易出问题的地方：

  • 复杂字段依赖：字段 A 改变时，字段 B 的验证规则也要动态调整，AI 生成的代码经常遗漏这个联动
  • 动态字段的状态清理：删除一个联系人时，相关的验证错误需要同步清除，AI 有时候会漏掉
  • 性能优化：AI 不一定意识到受控组件的重渲染问题，可能给一个功能正确但性能不好的方案
  • 异步验证防抖：AI 可能生成没有防抖的异步验证，导致每次按键都发请求

一个对我有用的策略是分步骤让 AI 生成，而不是一次性描述所有需求：

第一步：生成基础表单结构

第二步：添加验证规则（明确指定库和验证时机）

第三步：处理特定复杂场景（动态字段、多步骤等）

每步验证可用后再继续

另外，让 AI 解释它的设计选择，比直接拿代码更有价值——"为什么用 reset 而不是 defaultValues 处理异步数据？"这类追问往往能学到设计思路。

拿到 AI 生成的表单代码，建议检查这几项：

  • 有没有验证规则和错误提示？
  • 是否处理了提交状态（loading / disabled）？
  • 提交失败有没有错误处理？
  • 验证时机是否合理（推荐 onBlur）？
  • 异步验证是否有防抖？
  • 动态字段删除时，状态是否正确清理？

延伸与发散

在研究这些问题时，冒出了一些还没有答案的问题：

React Server Components 下的表单：RSC 不能直接用 React Hook Form（因为它依赖 hooks），Next.js 的 Server Actions 提供了一种新思路，不需要 JS 就能提交表单。这个方向值得关注，但还在快速演进中。

表单状态机：对于非常复杂的多步骤流程（如保险购买、贷款申请），有时候用 XState 这样的状态机库来管理表单的生命周期（编辑中 → 验证中 → 提交中 → 成功/失败）会更清晰。但大多数场景用 React Hook Form 就够了，不必过度设计。

表单生成器：后台管理系统里有大量相似的表单，很自然会想到用 JSON Schema 来描述表单结构，自动生成 UI。这条路技术上可行，但维护复杂度会转移到 schema 设计上，不一定是银弹。

无障碍支持：表单的 aria 属性（aria-required、aria-invalid、aria-describedby）是很容易忽视但很重要的细节，AI 生成的代码也经常漏掉这部分。

小结

表单之所以复杂，是因为它是"状态 + 验证 + 交互 + 性能"的交叉地带。单纯用 useState 能走多远，取决于表单有多简单。

这篇文章更多是我在遇到各种问题后的思考记录，核心观点是：

  • 受控组件直觉，非受控组件性能——React Hook Form 是目前平衡得比较好的方案
  • 验证时机比验证规则本身更影响用户体验，onBlur 是大多数场景的合理默认值
  • AI 能帮你快速生成骨架，但边界情况和性能优化还是需要自己把关
  • 复杂表单先想清楚数据结构，再选工具，而不是反过来

如果你有不同的实践或踩过不同的坑，欢迎交流。表单这件事，说复杂很复杂，说简单也可以很简单，关键是找到适合场景的方案，而不是追求一个通用答案。

参考资料

avatar
文章
阅读
粉丝