网站营销管理培训班,用织梦建手机网站,wordpress超级留言板路径,邢台微信网站异同总结
相同点#xff1a; 都有组件化思想 都支持服务器端渲染 都有Virtual DOM#xff08;虚拟dom#xff09; 数据驱动视图 都有支持native的方案#xff1a;Vue的weex、React的React native 都有自己的构建工具#xff1a;Vue的vue-cli、React的Create React A…异同总结
相同点 都有组件化思想 都支持服务器端渲染 都有Virtual DOM虚拟dom 数据驱动视图 都有支持native的方案Vue的weex、React的React native 都有自己的构建工具Vue的vue-cli、React的Create React App
区别 数据流向的不同。react从诞生开始就推崇单向数据流而Vue是双向数据流 数据变化的实现原理不同。react使用的是不可变数据而Vue使用的是可变的数据 组件化通信的不同。react中我们通过使用回调函数来进行通信的而Vue中子组件向父组件传递消息有两种方式事件和回调函数 diff算法不同。react主要使用diff队列保存需要更新哪些DOM得到patch树再统一操作批量更新DOM。Vue 使用双向指针边对比边更新DOM
具体分析
数据状态
为什么vue用datareact用state
1. Vue 中的 data()
data函数返回的对象内存地址并不相同每个实例对象的数据不会收到其他实例对象数据的污染 数据响应式系统: Vue 的核心特性之一是其响应式系统它能够自动追踪组件依赖并在数据变化时自动更新视图。 Vue 通过 data() 函数来定义组件的状态这个函数返回一个对象该对象中的属性会被 Vue 转换为响应式的。这意味着当这些数据发生变化时Vue 会自动更新相关的视图。 组件复用性: 在 Vue 中尤其是使用单文件组件时每个组件都是一个类的实例。因此为了避免多个实例共享同一个 data 对象Vue 要求 data 必须是一个函数从而每次创建新实例时都会返回一个新的 data 对象。这确保了组件实例之间的状态是相互独立的。 举例来说多个按钮组件可以独立地管理自己的状态而不会相互干扰。
export default {data() {return {count: 0, // 组件状态};},methods: {increment() {this.count;}}
}; 这里的 data() 返回一个对象Vue 会将其转换为响应式数据。当 count 改变时Vue 自动更新视图。
2. React 中的 state 函数式编程风格: React 更倾向于函数式编程理念state 是组件内部的状态管理工具。React 使用 useState 钩子在函数组件中或 this.state 和 this.setState在类组件中来管理状态。 在 React 中状态管理是通过显式调用 setState类组件或 useState 的状态更新函数函数组件来触发的。每次状态更新都会触发组件的重新渲染。 不可变性: React 强调状态的不可变性每次状态更新时setState 不会修改原始状态而是返回一个新的状态对象。这与 Vue 的响应式系统不同Vue 会直接修改状态对象。 不可变性使得 React 更容易进行调试和优化如在组件的 shouldComponentUpdate 或 React.memo 中判断状态是否发生变化。
import React, { useState } from react;
function Counter() {const [count, setCount] useState(0); // React 的 state
return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment/button/div);
} 这里的 useState 钩子用于声明组件的状态并返回当前状态和更新状态的函数。 对比总结
状态初始化与管理 Vue 的 data() 函数: 每个组件实例都有独立的状态因为 data() 每次都返回一个新的状态对象。 响应式数据直接更新会自动触发视图更新。 React 的 state: 状态是不可变的状态更新是通过 setState类组件或 useState函数组件来管理的更新状态会触发重新渲染。 函数式组件中使用 useState 钩子进行状态管理更加符合 React 的函数式编程风格。
组件复用性 Vue: 由于 data() 返回一个新的对象每个组件实例都有自己独立的状态这使得复用组件更加安全和简单。 React: React 通过 useState 或 this.state 来管理状态每个组件实例的状态也是独立的。
总结 Vue 使用 data() 函数来初始化组件状态主要是为了支持其响应式系统和确保组件实例之间的状态独立。 React 使用 state 来管理组件状态强调不可变性和函数式编程这与 Vue 的响应式数据模型有所不同。
react的单向数据流和vue的双向数据流对比
React 单向数据流 数据流向 数据从父组件通过 props 传递给子组件。 子组件不能直接修改父组件的数据只能通过回调函数将数据传回父组件。 状态管理 使用 useState、useReducer 或外部状态管理库如 Redux来管理状态。
Vue 双向数据绑定 数据流向 使用 v-model 实现表单元素的双向绑定自动同步数据和 UI。 父组件可以通过 props 传递数据给子组件子组件可以通过 $emit 事件将更新传回父组件。 状态管理 使用 data、computed、watch 等来管理组件状态。 可以使用 Vuex 进行全局状态管理。
组件化通信方式 react中我们通过使用回调函数来进行通信的而Vue中子组件向父组件传递消息有两种方式事件和回调函数。
React 回调函数 父组件将一个函数作为 props 传递给子组件。 子组件调用这个函数将数据传递回父组件。
Vue 事件 子组件使用 $emit 触发一个事件父组件监听这个事件来接收数据。 常用于父组件需要响应子组件的某个动作。 回调函数 父组件可以将一个函数作为 props 传递给子组件。 子组件调用这个函数将数据传递回父组件。 类似于 React 的方式。
diff算法
React 的 Diff 算法 Diff 队列 React 会对新旧虚拟 DOM 树进行比较找出变化的部分。 使用 diff 队列记录需要更新的节点。 Patch 树 根据 diff 队列生成 patch 树描述如何更新实际 DOM。 最后批量应用这些更新减少直接操作 DOM 的次数。 优化策略 假设同层级比较不跨层级移动节点。 使用 key 来优化列表 diff快速定位节点变化。
Vue 的 Diff 算法 双向指针 Vue 使用双向指针从头和尾同时遍历来比较新旧节点。 通过指针移动来确定节点的增删改。 边对比边更新 在对比的同时直接更新实际 DOM。 更加实时地处理节点更新。 优化策略 使用 key 来优化列表更新。 通过模板编译生成优化的渲染函数减少不必要的更新。
总结 React构建 patch 树后批量更新适合大型应用的复杂更新。 Vue边对比边更新实时处理更新适合高效处理小规模更新。 关注我不迷路
会不定时为大家更新优质内容欢迎⭐️☁️方便随时查阅
