Vue和React的对比

今晚咱们来搞一搞Vue和React的对比好吧，话很少说今天咱们直接开搞可好，各位小老板，开始吧

1. react总体是函数式的思想，把组件设计成纯组件，状态和逻辑经过参数传入， 因此在react中，是单向数据流，推崇结合immutable来实现数据不可变。 react在setState以后会从新走渲染的流程，若是shouldComponentUpdate返回的是true，就继续渲染， 若是返回了false，就不会从新渲染，PureComponent就是重写了shouldComponentUpdate， 而后在里面做了props和state的浅层对比;

而vue的思想是响应式的，也就是基因而数据可变的，经过对每个属性创建Watcher来监听， 当属性变化的时候，响应式的更新对应的虚拟dom

 

2.react的性能优化须要手动去作，而vue的性能优化是自动的，可是vue的响应式机制也有问题， 就是当state特别多的时候，Watcher也会不少，会致使卡顿，因此大型应用（状态特别多的）通常用react，更加可控

　　详解：vue组件在初始化时会经过Object.defineProperty对每个data属性创建对应的Wather，而后在模板编译时收集依赖。之后只要修改data的任何一个属性，就会触发视图的从新渲染，并且是精确的修改对应的vdom

　　　　　react的机制是每次setState的时候，调用shouldComponentUpdate，判断state或props改变需不须要从新render，若是返回true才会渲染。默认的实现是返回true，PureComponent的shouldComponnentUpdate浅层对比了两次state，考虑到性能，须要写好shouldComponentUpdate。

 

3. react的思路是all in js，经过js来生成html， 因此设计了jsx，还有经过js来操做css，社区的styled-component、jss等

　   vue是把html，css，js组合到一块儿，用各自的处理方式，vue有单文件组件， 能够把html、css、js写到一个文件中，html提供了模板引擎来处理

　　详解：react渲染是使用jsx，用js来操做html，列表渲染、条件判断等都经过js来控制，而vue提供了模板的语法，支持指令、过滤器等模板功能，简化了渲染逻辑。在react组件里须要写大段js才能描述清楚的逻辑，使用vue的模板能够很简洁紧凑的代表。

　　　　　模板和jsx各有优缺点，jsx所有使用js来写逻辑，更加的灵活，也没什么学习成本，可是有些渲染逻辑表达会比较啰嗦。 模板由于是专门针对渲染设计的DSL，因此写一些渲染逻辑时会特别的简洁和紧凑，但学习成本高一些，而且扩展须要经过指令和过滤器的方式。

　　

 4.react是类式的写法，api不多 而vue是声明式的写法，经过传入各类options，api和参数都不少。 因此react结合typescript更容易一块儿写，vue稍微复杂。 vue结合vue-class-component也能够实现类式的写法，可是仍是须要经过decorator来添加声明，并不纯粹

　　

 5.react能够经过高阶组件（Higher Order Components--HOC）来扩展，而vue须要经过mixins来扩展 React刚开始也有mixin的写法，经过React.createClass的api，不过如今不多用了。 Vue也不是不能实现高阶组件，只是特别麻烦，由于Vue对与组件的option作了各类处理， 想实现高阶组件就要知道每个option是怎么处理的，而后正确的设置。

　　

 6.react作的事情不多，不少都交给社区去作，交给社区去作的优点是能够产生不少优秀的方案，可是会增长技术栈的学习成本和上手难度。

　　vue不少东西都是内置的，写起来确实方便一些，内置的优点是技术栈学习成本低、上手快，可是方案变得不可替换了。

　　

　　总结：浓缩出来就是  思性路写扩射     这六个字的简便记忆方法我不便给大家描述，我相信大家能悟出来，实在想知道的私信我好吧

　　参考文档：

　　　　从2张运行流程图看vue和react区别：https://www.jianshu.com/p/1ebe36fbdcda

今天就到这里了，各位继续加油！！！