乐趣区

关于javascript:Vue与React两个框架的区别和优势对比

简略介绍

React–Facebook 创立的 JavaScript UI 框架。它撑持着包含 Instagram 在内的大多数 Facebook 网站。React 与过后风行的 jQuery,Backbone.js 和 Angular 1 等框架不同,它的诞生扭转了 JavaScript 的世界。其中最大的变动是 React 推广了 Virtual DOM(虚构 DOM)并发明了新的语法——JSX,JSX 容许开发者在 JavaScript 中书写 HTML(译者注:即 HTML in JavaScript)。

Vue 致力解决的问题与 React 统一,但却提供了另外一套解决方案。Vue 应用模板零碎(弱化的 jsx),使其对现有利用的降级更加容易。这是因为模板用的就是一般的 HTML,通过 Vue 来整合现有的零碎是比拟容易的,不须要整体重构。同时 Vue 的学习曲线绝对 react 来说更加容易。

相似之处

React 与 Vue 有很多相似之处,如他们都是 JavaScript 的 UI 框架,专一于发明前端的富利用。不同于晚期的 JavaScript 框架“功能齐全”,Reat 与 Vue 只有框架的骨架,其余的性能如路由、状态治理等是框架拆散的组件。

  • 两者都是用于创立 UI 的 JavaScript 库;
  • 两者都疾速轻便;
  • 都有基于组件的架构;
  • 都是用虚构 DOM;
  • 都可放入单个 HTML 文件中,或者成为更简单 webpack 设置中的模块;
  • 都有独立但罕用的路由器和状态治理库;

它们之间的最大区别是 Vue 通常应用 HTML 模板文件,而 React 则齐全是 JavaScript。Vue 有双向绑定语法糖。

不同点

1. 监听数据变动的实现原理不同

Vue 通过 getter/setter 以及一些函数的劫持,能准确晓得数据变动。

React 默认是通过比拟援用的形式(diff)进行的,如果不优化可能导致大量不必要的 VDOM 的从新渲染。为什么 React 不准确监听数据变动呢?这是因为 Vue 和 React 设计理念上的区别,Vue 应用的是可变数据,而 React 更强调数据的不可变,两者没有好坏之分,Vue 更加简略,而 React 构建大型利用的时候更加鲁棒。

2. 数据流的不同


Vue1.0 中能够实现两种双向绑定:父子组件之间,props 能够双向绑定;组件与 DOM 之间能够通过 v -model 双向绑定。Vue2.x 中去掉了第一种,也就是父子组件之间不能双向绑定了(然而提供了一个语法糖主动帮你通过事件的形式批改),并且 Vue2.x 曾经不激励组件对本人的 props 进行任何批改了。

React 始终不反对双向绑定,提倡的是单向数据流,称之为 onChange/setState() 模式。不过因为咱们个别都会用 Vuex 以及 Redux 等单向数据流的状态治理框架。

3.HoC 和 mixins

Vue 组合不同性能的形式是通过 mixin,Vue 中组件是一个被包装的函数,并不简略的就是咱们定义组件的时候传入的对象或者函数。比方咱们定义的模板怎么被编译的?比方申明的 props 怎么接管到的?这些都是 vue 创立组件实例的时候隐式干的事。因为 vue 默默帮咱们做了这么多事,所以咱们本人如果间接把组件的申明包装一下,返回一个 HoC,那么这个被包装的组件就无奈失常工作了。

React 组合不同性能的形式是通过 HoC(高阶组件)。React 最早也是应用 mixins 的,不过起初他们感觉这种形式对组件侵入太强会导致很多问题,就弃用了 mixinx 转而应用 HoC。高阶组件实质就是高阶函数,React 的组件是一个纯正的函数,所以高阶函数对 React 来说非常简单。

4. 组件通信的区别


Vue 中有三种形式能够实现组件通信:父组件通过 props 向子组件传递数据或者回调,尽管能够传递回调,然而咱们个别只传数据;子组件通过事件向父组件发送音讯;通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据,能够逾越多个层级。

React 中也有对应的三种形式:父组件通过 props 能够向子组件传递数据或者回调;能够通过 context 进行跨层级的通信,这其实和 provide/inject 起到的作用差不多。React 自身并不反对自定义事件,而 Vue 中子组件向父组件传递音讯有两种形式:事件和回调函数,但 Vue 更偏向于应用事件。在 React 中咱们都是应用回调函数的,这可能是他们二者最大的区别。

5. 模板渲染形式的不同

在表层上,模板的语法不同,React 是通过 JSX 渲染模板。而 Vue 是通过一种拓展的 HTML 语法进行渲染,但其实这只是表面现象,毕竟 React 并不必须依赖 JSX。

在深层上,模板的原理不同,这才是他们的本质区别:React 是在组件 JS 代码中,通过原生 JS 实现模板中的常见语法,比方插值,条件,循环等,都是通过 JS 语法实现的,更加纯正更加原生。而 Vue 是在和组件 JS 代码拆散的独自的模板中,通过指令来实现的,比方条件语句就须要 v-if 来实现对这一点,这样的做法显得有些独特,会把 HTML 弄得很乱。

6. 渲染过程不同

Vue 能够更快地计算出 Virtual DOM 的差别,这是因为它在渲染过程中,会跟踪每一个组件的依赖关系,不须要从新渲染整个组件树。

React 在利用的状态被扭转时,全副子组件都会从新渲染。通过 shouldComponentUpdate 这个生命周期办法能够进行管制,但 Vue 将此视为默认的优化。

7. 框架实质不同

Vue 实质是 MVVM 框架,由 MVC 倒退而来;

React 是前端组件化框架,由后端组件化发展而来。

8.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 来比拟的,这两点的区别,也是因为 React 和 Vue 的设计理念不同。React 更偏差于构建稳固大型的利用,十分的科班化。相比之下,Vue 更偏差于简略迅速的解决问题,更灵便,不那么严格遵循条条框框。因而也会给人一种大型项目用 React,小型我的项目用 Vue 的感觉。

总结

Vue 的劣势包含:

  • 模板和渲染函数的弹性抉择
  • 简略的语法及我的项目创立
  • 更快的渲染速度和更小的体积

React 的劣势包含:

  • 更实用于大型利用和更好的可测试性
  • 同时实用于 Web 端和原生 App
  • 更大的生态圈带来的更多反对和工具

而实际上,React 和 Vue 都是十分优良的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的性能是相通的:

  • 利用虚构 DOM 实现疾速渲染
  • 轻量级
  • 响应式组件
  • 服务器端渲染
  • 易于集成路由工具,打包工具以及状态管理工具
  • 优良的反对和社区
退出移动版