一文带你理清Vue与React的区别
Vue 和 React 是目前前端开发中最主流的两个框架/库它们在设计理念、语法结构、数据流管理、组件化机制等方面有显著差异。下面从多个维度详细对比 Vue 与 React 的语法差异...总结维度VueReact设计理念结合了响应式编程和模板系统致力于简化开发过程。更倾向于函数式编程思想推崇组件的不可变性和单向数据流。组件化方式Vue 每个组件都有自己的状态和行为并且可以很容易将数据和行为绑定在一起组件包含状态和行为所有组件共享一个状态树数据驱动方式支持双向数据绑定使用v-model指令适合于简化表单输入等场景。单向数据流组件状态通过setState方法更新模版语法使用基于HTML的模板语法允许开发者使用纯HTML、CSS和JavaScript支持指令使用JSXJavaScript XML将标记语言与JavaScript逻辑混写。生命周期Vue 生命周期创建、挂载、更新、销毁React 生命周期初始化、更新、卸载状态管理方式Vue 提供了Vuex/Pinia作为官方的状态管理解决方案。React 状态管理通常通过使用Context API或引入如Redux、MobX的库来实现。性能优化方式keep-alive、v-ifReact.memo、shouldComponentUpdate响应式系统通过其响应式系统自动追踪依赖并在数据变化时更新视图。通过setState和useState等API显式地触发UI更新。类型支持Vue 3提供了更好的TypeScript支持。原生支持JavaScript但可以很好地与TypeScript结合。一、核心定位差异设计哲学不同维度VueReact类型渐进式框架Framework声明式 UI 库Library设计理念“渐进式”可逐步引入功能适合从简单页面到复杂应用的过渡“只关心视图层”专注于构建用户界面其他能力由生态补充控制粒度提供更多内置功能如指令、响应式系统、模板解析等更灵活但更“裸”需要开发者自行选择状态管理、路由等方案✅ 简单说Vue 是“全家桶式”的封装良好体验React 是“乐高式”的自由组合模式。二、模板语法 vs JSX1. Vue基于 HTML 的模板语法Template-basedvuetemplate div classcounter p当前计数{{ count }}/p button clickincrement1/button /div /template script export default { data() { return { count: 0 } }, methods: { increment() { this.count } } } /script使用类似 HTML 的 template 标签编写视图。指令系统丰富v-if, v-for, v-model, v-bind, v-on 等。数据绑定使用双大括号 {{ }}。事件监听用 click 或 v-on:click。支持单文件组件SFC.vue 文件包含 template/script/style。2. ReactJSXJavaScript XMLjsximport React, { useState } from react; function Counter() { const [count, setCount] useState(0); const increment () { setCount(count 1); }; return ( div classNamecounter p当前计数{count}/p button onClick{increment}1/button /div ); } export default Counter;视图直接写在 JavaScript 中使用 JSX 语法。JSX 是 JS 的语法扩展最终会被 Babel 编译为 React.createElement() 调用。所有属性使用驼峰命名如 onClick, className。条件渲染、循环等都通过 JavaScript 表达式实现jsx//列表循环 {count 0 p正数/p} {items.map(item li key{item.id}{item.name}/li)} //控制显隐 {show?p捉迷藏/p:p不见了/p}三、数据响应式机制VueReact响应式自动依赖追踪基于 Object.defineProperty / Proxy手动触发更新setState / useState更新方式数据变化自动更新视图需显式调用状态更新函数才会重新渲染Vue 示例自动响应javascriptthis.count // 视图自动更新React 示例手动通知javascriptsetCount(count 1); // 显式通知 React 状态已变四、组件通信方式VueReactPropsprops: [title]function Comp({ title }) { }向下传v-bind直接传递 props向上传$emit(event)回调函数作为 prop 传递跨层级provide/injectContext API全局状态Vuex / PiniaRedux / Zustand / Context虽然功能相似但 Vue 提供了更统一的官方解决方案如 Pinia而 React 生态更为分散。五、生命周期与 HooksVue 生命周期钩子Options APIjavascriptcreated() {}, mounted() {}, updated() {}, beforeDestroy() {}React 类组件生命周期已逐渐淘汰javascriptcomponentDidMount, componentDidUpdate, componentWillUnmountReact 函数组件 Hooks现代标准javascript⚠️ React 推崇函数组件 Hook 模式彻底摆脱类的概念。Hook的定义Hook 钩子是特殊的函数让你能在函数组件中使用 React 的状态state和其他特性如副作用、上下文、ref 等而无需定义 class 组件。它是一根“钩子”把你的函数组件连接到 React 的内部运行机制上去。Hook是useState、useEffect、useMemo等hook方法的总称提供了一种在函数组件中实现状态逻辑、生命周期方法、副作用处理以及其他各种功能的方法使得函数组件也能拥有原本只有类组件才能拥有的能力。常见的内置 HookHook功能说明useState添加本地状态stateconst [state,setState] useState(0);[当前值, 设置值的函数],1.区别vue可以理解为vue是const state ref(0)响应式更新statereact是定义state时自己带个可以更新state的函数2.初始值可以是一个函数延迟初始化const [data,setData] useState((){//只在首次渲染时执行return expensiveCalculation();});useEffect执行副作用操作如数据获取、订阅、手动 DOM 操作、设置定时器useEffect((){},[a,b]);空依赖[]是初次渲染无依赖是无限制副作用Side Effect是指那些不属于纯渲染过程的操作添加依赖数据变化时渲染类似于vue的watch仅当数据改变时重新执行useContext访问 React 上下文ContextuseReducer更复杂的状态逻辑管理类似 Redux 模式useCallback缓存函数引用以优化性能useMemo缓存计算结果以避免重复计算类似vue的计算属性useRef创建可变的 ref 对象用于访问 DOM 或保存任意值useImperativeHandle自定义暴露给父组件的实例值useLayoutEffect在 DOM 更新后同步触发副作用与 useEffect 类似但更早useDebugValue在开发者工具中显示自定义 Hook 的标签✅ 使用前提条件useEffect(() { const timer setInterval(() { console.log(每秒打印一次); }, 1000); // 返回一个清理函数 return () { clearInterval(timer); console.log(定时器已清除); }; }, []);不同依赖项的行为依赖项行为[]只在挂载时运行一次相当于 componentDidMount[dep1, dep2]当 dep1 或 dep2 变化时运行无依赖项每次渲染后都运行import React, { useState, useEffect } from react; function UserProfile({ userId }) { const [user, setUser] useState(null); // 相当于 componentDidMount componentDidUpdate useEffect(() { fetch(/api/users/${userId}) .then(res res.json()) .then(data setUser(data)); }, [userId]); // 依赖项数组仅当 userId 改变时重新执行 return ( div {user ? h1{user.name}/h1 : p加载中.../p} /div ); }只能在函数组件或自定义 Hook中调用 Hook。必须在顶层作用域调用不能在条件语句、循环、嵌套函数中调用。必须遵循 Hook 规则useEffect处理副作用只有当你需要监听非 JSX 元素的事件时才用 useEffect返回一个清理函数这个函数会在组件卸载时unmount/下次 effect 执行前如果依赖项发生变化自动执行用来清除useEffect中的副作用useEffect(() { // componentDidMount componentDidUpdate return () { // componentWillUnmount }; }, [deps]);对比Vue 的 Options API 将逻辑按类型组织data/methods/lifecycle。React 的 Hook 按功能组织允许将相关逻辑聚合在一起如一个副作用及其清理。 Vue 3 也推出了 Composition APIsetup() ref/reactive明显受到 React Hooks 启发。六、样式处理VueReact单文件样式stylescoped 局部作用域CSS Modules/ Styled-components / Tailwind动态类名:class{ active: isActive }className{isActive ? active : }内联样式:style{ color: red }style{{ color: red }}Vue 原生支持 scoped CSSReact 需借助第三方工具实现模块化。七、构建工具与生态系统VueReact官方 CLIVue CLI / ViteCreate React App / Vite路由Vue RouterReact Router状态管理Pinia / VuexRedux / Zustand / JotaiSSRNuxt.jsNext.js移动端Uni-app / TaroReact Native / Taro两者生态都非常成熟React 社区更大、第三方库更多Vue 更强调一致性与文档质量。八、React 语法的来源与成因1.JSX 的起源Facebook 内部需求驱动React 最初由 Facebook 开发团队Jordan Walke 等人于 2011 年提出目的是解决大型 Web 应用中 UI 更新复杂、性能低下的问题。•传统做法jQuery 手动操作 DOM → 难以维护。•新思路虚拟 DOM 声明式 UI → 只需描述“UI 应该是什么样”无需关心如何更新。JSX正是为了让“描述 UI”更加直观而设计的语法糖。 JSX 并不是必须使用的你可以完全用 React.createElement() 写代码但那非常冗长。javascript// 不用 JSX return React.createElement(div, null, Hello); // 使用 JSX return divHello/div;2.为什么选择“混合 JS 与 HTML”React 团队认为•UI 本质上是数据的函数映射UI f(state)•如果把模板语言独立出来如 Angular/Vue 的 template就会导致逻辑与视图割裂。•而 JavaScript 已经具备强大的表达能力条件、循环、函数为什么不直接用它来构建 UI React 的理念“Everything is JavaScript.”
)
