React与Vue表单的对比差异

作者: 前端AC | 原文: https://juejin.cn/post/7497088025638240310

前言

小编在学react的时候，发现react在使用ant-design组件的from表单，有点惊奇，跟vue差别确实有点大。

1-React 与 Vue 表单处理对比指南

0. 核心差异概述

特性	Vue	React (Ant Design Form)
数据定义	必须显式定义 reactive/ref	通过 name 隐式定义
数据管理	集中式响应式对象	分散式状态或表单库托管
双向绑定	v-model 直接绑定	受控组件或表单库自动处理
代码风格	模板驱动	JSX/函数式驱动

2-Vue 表单实现详解

2.1 基础表单结构

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" placeholder="用户名">
    <input v-model="form.password" placeholder="密码">
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

// 必须显式定义数据结构
const form = reactive({
  username: '',
  password: ''
});

const handleSubmit = () => {
  console.log(form);
};
</script>

2.2 使用 Ant Design Vue

<template>
  <a-form :model="form" @finish="handleSubmit">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="form.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue';

// 仍然需要显式定义
const form = reactive({
  username: '',
  password: ''
});
</script>

3-React 表单实现详解

3.1 原生受控组件

import { useState } from 'react';

function LoginForm() {
  // 分散式状态管理
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="用户名"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button type="submit">提交</button>
    </form>
  );
}

3.2 使用 Ant Design Form

import { Form, Input, Button } from 'antd';

function LoginForm() {
  const [form] = Form.useForm();

  // 不需要预先定义数据结构！
  const onFinish = (values) => {
    console.log(values); // 自动包含所有name字段
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username">
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password">
        <Input.Password placeholder="密码" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

---

4-高级功能对比

4.1 表单验证 Vue 版本

<a-form-item 
  label="邮箱" 
  name="email"
  :rules="[
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' }
  ]"
>
  <a-input v-model:value="form.email" />
</a-form-item>

React 版本

<Form.Item
  name="email"
  rules={[
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' }
  ]}
>
  <Input />
</Form.Item>

4.2 动态表单字段 Vue 版本

<template v-for="(item, index) in form.items" :key="index">
  <a-input v-model:value="item.value" />
</template>

React 版本

{fields.map((field) => (
  <Form.Item name={['items', field.name]} key={field.id}>
    <Input />
  </Form.Item>
))}

5-为什么 React 不需要预先定义？

1. 设计哲学差异
   • Vue 的响应式系统需要明确知道哪些属性需要跟踪

   • React 的状态更新是显式的（通过 setState）

2. Ant Design Form 的工作原理

   graph TD
     A[Form.Item的name属性] --> B[内部维护store]
     B --> C[onFinish时提取对应数据]

3. 性能考量
   • Vue 的响应式系统需要初始化所有属性

   • React 的虚拟 DOM 差异更新更灵活

---

6-学习建议

1. Vue 学习者
   • 掌握 reactive/ref 的定义规范

   • 理解 v-model 的编译原理

2. React 学习者
   • 区分受控组件和非受控组件

   • 学习主流表单库（Ant Design Form/Formik）

3. 通用原则
   • 始终确保表单数据可追溯

   • 复杂表单建议使用专业库（VeeValidate/Formik）

---

附录：资源推荐 • Vue 官方表单文档

• Ant Design Vue Form

• React 受控组件文档

• Ant Design Form API

---