React VS Vue

react和vue是市面上最流行的两个前端框架，下面对react和vue的特性进行一个对比。

1.模板
表面上，模板的语法不同：

React 是通过JSX渲染模板
而Vue是通过一种拓展的HTML语法进行渲染
深层上，模板的原理不同，这才是他们的本质区别：

React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值、条件判断、循环等，都是通过JS语法实现的
Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如v-if
2.Vue和React中数据绑定原理不同
Vue通过getter/setter以及Object.defineProperty的函数劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制purerender，但Vue将此视为默认的优化。

react渲染：

vue渲染：

3.数据流的不同
总所周知，vue中默认是支持双向绑定的。在vue1.x中我们可以实现两种双向绑定：

1.父子组件之间，props可以双向绑定；

2.组件与DOM之间可以通过v-module双向绑定

而vue2.x中去掉了第一种，也就是父子组件之间不能双向绑定了，但是提供了$emit语法糖自动帮助通过事件的方式修改。由于vue2.x已经不支持组件对自己的props进行任何修改。所以现在只有组件↔DOM之间的双向绑定这一种。

然而react从诞生开始就不支持双向绑定，react一直提倡的是单向数据流。但是由于我们在项目中都会用vuex和redux等单向数据流的状态管理框架，因此很多时候感受不到这一点区别。

4.组件通信的区别

在vue中有三种方式可以实现组件通信：

父组件通过props向子组件传递数据或回调。但是一般来说，我们只穿数据，而通过事件的机制来处理组件向父组件的通信
子组件通过事件向父组件发送消息
通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级
在react中，也有对应的三种方式：

父组件通过props可以向子组件传递数据或回调
可以通过context进行跨层级的通信，这和vue中provide/inject起到的作用差不多
5.vuex和redux的区别
vuex的流向：view——>commit——>mutations——>state变化——>view变化（同步操作）

                  view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）

redux的流向：view——>actions——>reducer——>state变化——>view变化（同步异步一样） redux的state数据设计，进行范式化。