首页 > 学习资料 > 编程知识

React vs Vue 2022-07-21 14:44:27

监听数据变化的方式Vue 通过 getter/setter 和一些函数的劫持,就能精确知道数据的变化,不需要特别的优化;React 通过比较引用的方式来判断数据的变化,如果不优化(PureComponent/shouldComponentUpdate)可能会导致不必要的 vDOM 的重绘;

  Tips: Vue 使用的是可变数据,React 使用的是不可变的数据;Vue 的使用更加简单,React 更适合大型应用;

数据流Vue2.x 父子组件组件之前通过props来传递数据(提供了 .sync 的方式来实现父子组组件的双向绑定),组件和 DOM 之间通过 v-model 来进行双向绑定;React 不支持双向绑定,一直提倡的都是单项数据流Hoc 和 mixins

  在 Vue 中组合不同功能的方式目前是 mixin,在 React 中目前常用的方式是 Hoc 高阶组件的方式,接下来可能会被 hook 取代;

组件通信的区别Vue 组件通信方式父组件通过 props 向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据,而通过事件的机制来处理子组件向父组件的通信子组件通过 事件 向父组件发送消息通过 provide/inject 来实现父组件向子组件注入数据,可以跨越多个层级

  2. React 组件通信方式

父组件通过 props 可以向子组件传递数据或者回调子组件通过 回调(callback) 向父组件发送消息可以通过 context 进行跨层级的通信,这与 Vue 的 provide/inject方式类似模板渲染的语法不同React 是通过 X 来渲染模板,但是并不依赖 XVue 是通过拓展 HTML 语法来渲染模板

  通过渲染模板的不同,我们不难看出 React 的渲染是通过 X 来渲染,本质上是通过 js 来渲染的,比如差值、条件、循环等都是通过 js 的句法来实现;而 Vue 的渲染模板是 js 和模板分开处理的,通过指令(v-if、v-for等)来实现差值、条件、循环等语法。关于这一点,萝卜青菜各有所爱,React 偏向 js 一点,Vue 偏向 HTML 一点,没有好坏的区分

Vuex 和 Redux 的区别

  使用方式上的区别

在 Vuex 中,$store 直接注入到组件的实例中,可以灵活使用使用 dispatch 和 commit 提交更新,最终通过 mutations 实现更新通过 ** pState 或者直接通过 this.$store 来读取数据

  2. 在 React 中,通过 connect 将所需 store 中的数据引入组件,再通过 dispatch 发出更新请求,在 reducer 中进行 store 的更新

  3. 从原理上来说,有两个比较大的区别:

Redux 使用的是不可变数据,每次更新都是用新的 state 替换旧的 state; 而 Vuex 使用的是可变数据,直接修改数据就行Redux 只需要知道数据变了,具体怎么变的并不关心,直接交给 React 来 diff vDOM 就行了;而 Vuex 和 Vue 其实一样,都是用过 getter/setter 来劫持数据的变化,来进行数据的更新

  React 更偏向构建稳定大型的应用,相比之下,Vue 更加灵活快速

相关标签:

<