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

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