React与Vue的异同

一、Vue和React的相同点
组件化：React与Vue都鼓励将你的应用分拆成一个个功能明确的模块，这样的组件化使得结构清晰且易复用。
虚拟Dom：为高效渲染页面，减少性能的消耗，都采取了Virtual Dom。
配套框架：两个框架都专注于UI层，其他的功能如路由、状态管理（vuex,redux）等都交由同伴框架进行处理。
构建工具：React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。
二、Vue和React的不同点
1、模板和jsx
vue：Vue.js 把html，css，js组合到一起，用各自的处理方式，使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
react：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，简单说这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
2、状态管理
vue：数据由data属性在Vue对象中进行管理。
react：数据由state属性管理，但不能直接改变state的状态，需要通过setState()去更新。
3、组件嵌套
vue：通过slot插槽进行嵌套传递
react：通过props.children的方式将标签内的部分传递给子组件

props.children
https://blog.csdn.net/u012372720/article/details/94000150

三、条件渲染和列表渲染
vue条件渲染：v-if、v-show条件渲染一组数。
vue列表渲染：v-for一组数进行列表渲染。

react条件渲染：使用逻辑运算&& || 、三目运算符来创建表示当前状态的元素。
react列表渲染：通过使用{}在JSX内构建一个元素集合，使用map()方法循遍历数组。

四、组件间的通信传值
1、vue：
父传子：通过父组件绑定自定义属性（或通过v-bind绑定动态属性），子组件使用 props 选项时显式的声明props，以便它可以从父组件接收到期望的数据。
子传父：通过父组件绑定自定义事件，子组件通过this.emit(‘自定义事件’,value)传值。
非父子：可以使用一个空的 Vue 实例绑定在Vue实例的原型上作为一个事件总线中心(vue.prototype.eventBus = new Vue())，用emit触发事件，on监听事件。

vue的几种组件内通信：父传子、子传父、vuex、Event的emit和on
https://www.cnblogs.com/fundebug/p/10884896.html

2、react：

react的几种组件内通信：父传子、子传父、context上下文、redux、事件订阅
https://www.jianshu.com/p/fb915d9c99c4
context上下文：https://www.cnblogs.com/qiqi715/p/10414229.html

五、路由管理

react路由
https://segmentfault.com/a/1190000019790930

vue的路由管理嵌在中

六、单向绑定 vs 双向绑定
1、react：
在react里，数据流同样是单项传递的。父组件将值传给子组件，但子组件不能修改父组件的值。（想想看，父组件的值可能并不只用于这一个子组件，一旦能修改，所有使用改数据的组件都会发生变化，那么是谁对数据进行了更改呢？）子组件想要修改父组件的值，只能通过调用父组件传递过来的方法，从而将值传递给父组件，让父组件进行修改。
2、vue：
而Vue支持单向绑定和双向绑定
单向绑定：插值形式{{data}}， v-bind也是单向绑定。
双向绑定：表单v-model，用户对view层的更改会直接同步到model层。（实际上v-model只是v-bind:value 和 v-on:input的语法糖）

七、框架本质不同
Vue是MVVM模式的一种方式实现。但没有完全遵循 MVVM 模型。
React是前端组件化框架，是严格的view层，MVC模式。由后端组件化发展而来。
首先搞明白mvvm是啥意思。vm是view mode的意思。所以mvvm框架是要有一个vm对象，来映射view。也就是vm对象的属性发生改变的时候，对应的视图部分会相对应更新。比较经典的有knockoutjs，里面比较关键的概念就是view model，compute，view模板等。对的，vue中其实是有不少它的影子。然后来看看react，它没有纯粹意义上的vm对象，它有的是属性和状态。用属性和状态去映射视图。那么属性和状态和vm有什么区别呢？个人认为，vm对象不管你值是从外部传进来的还是自己内部定义的，最后都一视同仁。很多情况还有双向绑定的机制，可能早期的flex，让人感到惊艳吧，后面的mvvm框架都有双向绑定的概念。而react，强调的是属性不可变性，单向数据流。内部的状态内部自己控制。这样的设计可能从设计上更复杂一些，但是从使用上变得更确定，更清晰了。如果react用的比较熟，给合适的组件管理合适的状态，做好状态的合理分层，会大大降低应用复杂度。然后，redux有个很先进的概念叫容器组件和纯展示组件，如果领悟了这个设计思路的话，把复杂的东西集中到少部分组件中，大部分组件就变成纯展示组件，进一步降低应用复杂性。

八、状态管理
应用中的状态是React关键的概念，也有一些配套框架被设计为管理一个大的state对象，如Redux。state对象在react应用中是不可变的，需要使用setState()方法更新状态。在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理。
而在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理，也无需使用如setState()之类的方法去改变它的状态，在Vue对象中，data参数就是应用中数据的保存者。

九、性能优化
在react中，当组件状态改变时（setState后），它会触发整个子组件数重新渲染，以根组件作为渲染基点。为了避免不必要的子组件重新渲染，你需要使用PureComponent或者实现 shouldComponentUpdate。
在Vue中，vue组件在初始化时会通过Object.defineProperty对每一个data属性建立对应的Wather，然后在模板编译时收集依赖。以后只要修改data的任何一个属性，就会触发视图的重新渲染，而且是精确的修改对应的vdom。这就不需要开发人员对整个性能进行优化，允许他们更专注于构建应用程序本身。
总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。