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 钩子用于声明组件的状态，并返回当前状态和更新状态的函数。

1. 对比总结

状态初始化与管理

• Vue 的 data() 函数:

  • 每个组件实例都有独立的状态，因为 data() 每次都返回一个新的状态对象。

  • 响应式数据直接更新会自动触发视图更新。

• React 的 state:

  • 状态是不可变的，状态更新是通过 setState（类组件）或 useState（函数组件）来管理的，更新状态会触发重新渲染。

  • 函数式组件中使用 useState 钩子进行状态管理，更加符合 React 的函数式编程风格。

组件复用性

• Vue:

  • 由于 data() 返回一个新的对象，每个组件实例都有自己独立的状态，这使得复用组件更加安全和简单。

• React:

  • React 通过 useState 或 this.state 来管理状态，每个组件实例的状态也是独立的。

总结

• Vue 使用 data() 函数来初始化组件状态，主要是为了支持其响应式系统和确保组件实例之间的状态独立。

• React 使用 state 来管理组件状态，强调不可变性和函数式编程，这与 Vue 的响应式数据模型有所不同。

react的单向数据流和vue的双向数据流对比？

React 单向数据流

1. 数据流向：

   • 数据从父组件通过 props 传递给子组件。

   • 子组件不能直接修改父组件的数据，只能通过回调函数将数据传回父组件。

2. 状态管理：

   • 使用 useState、useReducer 或外部状态管理库（如 Redux）来管理状态。

Vue 双向数据绑定

1. 数据流向：

   • 使用 v-model 实现表单元素的双向绑定，自动同步数据和 UI。

   • 父组件可以通过 props 传递数据给子组件，子组件可以通过 $emit 事件将更新传回父组件。

2. 状态管理：

   • 使用 data、computed、watch 等来管理组件状态。

   • 可以使用 Vuex 进行全局状态管理。

组件化通信方式？

        react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数。

React

• 回调函数

  • 父组件将一个函数作为 props 传递给子组件。

  • 子组件调用这个函数，将数据传递回父组件。

Vue

• 事件：

  • 子组件使用 $emit 触发一个事件，父组件监听这个事件来接收数据。

  • 常用于父组件需要响应子组件的某个动作。

• 回调函数：

  • 父组件可以将一个函数作为 props 传递给子组件。

  • 子组件调用这个函数，将数据传递回父组件。

  • 类似于 React 的方式。

diff算法

React 的 Diff 算法

1. Diff 队列：

   • React 会对新旧虚拟 DOM 树进行比较，找出变化的部分。

   • 使用 diff 队列记录需要更新的节点。

2. Patch 树：

   • 根据 diff 队列生成 patch 树，描述如何更新实际 DOM。

   • 最后批量应用这些更新，减少直接操作 DOM 的次数。

3. 优化策略：

   • 假设同层级比较，不跨层级移动节点。

   • 使用 key 来优化列表 diff，快速定位节点变化。

Vue 的 Diff 算法

1. 双向指针：

   • Vue 使用双向指针（从头和尾同时遍历）来比较新旧节点。

   • 通过指针移动来确定节点的增删改。

2. 边对比边更新：

   • 在对比的同时直接更新实际 DOM。

   • 更加实时地处理节点更新。

3. 优化策略：

   • 使用 key 来优化列表更新。

   • 通过模板编译生成优化的渲染函数，减少不必要的更新。

总结

• React：构建 patch 树后批量更新，适合大型应用的复杂更新。

• Vue：边对比边更新，实时处理更新，适合高效处理小规模更新。

关注我，不迷路！

会不定时为大家更新优质内容，欢迎👍🏻+⭐️+☁️！！！方便随时查阅