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 基础表单结构

2.2 使用 Ant Design Vue

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 (
    

       setUsername(e.target.value)}
        placeholder="用户名"
      />
       setPassword(e.target.value)}
        placeholder="密码"
      />
      提交
    
  );
}

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 (
    

      
        
      
      
        
      
      
        提交
      
    
  );
}

---

4-高级功能对比

4.1 表单验证
Vue 版本

React 版本

4.2 动态表单字段
Vue 版本

React 版本

{fields.map((field) => (
  
    
  
))}

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

---