React PK Vue

[emilyzfive]

上手

react 上手成本高

运行时和预编译

• react 重运行时，渲染的 dom diff 操作都是在运行时做的。dom diff 的时间超过 16ms，会让页面出现卡顿，react 使用 Fiber 来解决这个问题。
• vue 在运行时和预编译取了平衡，组件层面用响应式通知，组件内部通过 dom diff 计算，既控制了应用内部 watcher 数量，也控制了 dom diff 的量级。Vue3 通过静态标记+响应式+虚拟 dom 的方式，控制了 diff 的颗粒度。

#监听数据变化的实现原理不同

• Vue 通过 getter/setter 和一些函数的劫持，能精确制导数据的变化，不需要特别的优化就能达到很好的性能
• React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒

数据流的不同

React 一直提倡单项数据流
Vue v-model 可以实现双向数据绑定

组件通信的区别

Vue 中三种方式：props、emit 事件、provide/inject
React 中：props、context
可以看到，react 本身不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

模板渲染方式的不同

react 通过 jsx 渲染模板，通过原生 js 实现模板中的常见语法，更加纯粹原生
vue 使用 template，通过指令来实现常见语法，比如 v-if v-for

Vuex 和 Redux 的区别

从表面上来说，store 注入和使用方式有一些区别。
在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

• 使用 dispatch 和 commit 提交更新
• 通过 mapState 或者直接通过 this.$store 来读取数据

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。
另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来说，最大的区别是两点：

• Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
• Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）
  而这两点的区别，其实也是因为 React 和 Vue的设计理念上的区别。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。

开发感受

react 把各种优化交给了开发者，Vue 则帮开发者做了很多工作。

参考：Vue 和 react 的区别