React与Vue的对比
异同总结
相同点：
-
都有组件化思想
-
都支持服务器端渲染
-
都有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用data，react用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 (
<div>
<p>Count: {count}</p>
<button 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：边对比边更新，实时处理更新，适合高效处理小规模更新。
关注我，不迷路！
会不定时为大家更新优质内容，欢迎👍🏻+⭐️+☁️！！！方便随时查阅