共计 2993 个字符，预计需要花费 8 分钟才能阅读完成。
简略介绍
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 实现疾速渲染
- 轻量级
- 响应式组件
- 服务器端渲染
- 易于集成路由工具，打包工具以及状态管理工具
- 优良的反对和社区
