简略介绍
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 实现疾速渲染
- 轻量级
- 响应式组件
- 服务器端渲染
- 易于集成路由工具,打包工具以及状态管理工具
- 优良的反对和社区