vue 和 react 区别

407 阅读2分钟

vue 和 react 区别

主要差异

中心思想

  • vue 中心思想是 html + css + js 的模式,
  • react 中心思想是函数式,使用jsx,也就是 all in js 监听数据原理
  • vue 是通过数据劫持来知道数据的更改的
  • react 是通过比较数据的方式来 数据流
  • vue Parent 到 Child 是单向的,dom 到 view 是双向的,处理表单这块 vue 具有一定的优势
  • react 是完全的单向数据流,处理表单这块,react 可以借助一些高阶组件 模版
  • reacct 是通过 jsx 渲染模板
  • vue 是通过一种拓展的 html 语法进行渲染 状态管理
  • vuex 中,store 是直接被注入了组件实例
  • redux 中,通过 connect 将 props 和 dispatch 联系起来 生命周期 事件处理
  • vue 还是原生事件,只是封装了一下
  • react 合成事件

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

vue 根据双向数据绑定劫持数据,当数据发生改变后更新相应的 dom,数据精确化,有一个比较不错的性能。 react 是通过数据全量对比,只要有数据发生变化就会更新,会导致大量不必要的 vDom 进行渲染,需要用 PureComponent/shouldComponentUpdate 进行优化

生命周期

  • vue Alt text
  • react Alt text

hoc 和 mixins

mixins 对组件侵入太强,高阶组件会增加一些多余的节点嵌套。 react 组件就是一个函数,对高阶组件支持,而 vue 是一个被包装对函数,所以 react 支持 hoc,vue组件会自动帮我们做很多事情,绑定 this,所以对 hoc 兼容性很差。

模版渲染

react 组件是在 js 代码中,支持js 各种语法(比如条件、循环), render支持闭包特性对,import 后,组件可以直接使用。 vue 组件模版和 js 分离,通过大量指令来实现条件、循环、事件,由于 vue 模版使用对数据必须挂载在 this 上,所以我们import 组件后必须在 components中声明。

vuex 和 redux 区别

redux 推崇对是不可变数据,通过 diff 比较差异(新数据替换旧数据),只能 dispatch action,不能直接调用 reducer,通过 connect 读取数据

vuex 推崇可变数据,通过内部创建一个 vue 实例(双向数据绑定)来跟踪数据对,使用 dispatch 和 commit 提交更新(在mutation中直接修改数据),通过 mapState 或者 this.$store 读取数据