react和vue的区别之一

前言

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

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

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

2-Vue 表单实现详解

2.1 基础表单结构

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

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 原生受控组件

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

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

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 版本

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

4.2 动态表单字段

Vue 版本

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

React 版本

jsx 复制代码
{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 的工作原理

    Form.Item的name属性 内部维护store 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


相关推荐
Carlos_sam16 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录25 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录1 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区1 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
遂心_2 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
风清云淡_A2 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界2 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
DownToEarth2 小时前
H5实现获取当前定位
javascript
前端Hardy3 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html