react和vue对比总结

相似点：

同属于mvvm框架

都支持组件化,

都有Virtual DOM，组件化开发的概念，通过props参数进行父子组件之间数据的传递，都实现了webComponent规范

都是数据驱动视图

不同点：

1.写法：

  react使用jsx语法（如果要在JS里写HTML，就是创造一个一个的DOM对象，用JS来写，会非常的冗余并且不能一目了然的看清楚DOM的结构。所以就扩展成了JSX，直接用HTML的写法在js中写DOM）

   Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易。这是因为模板用的就是普通的HTML，通过Vue来整合现有的系统是比较容易的，不需要整体重构。

2. 数据更新：

Vue采取依赖追踪，默认是优化状态：按需更新；

React在则有两种选择：

1）手动添加shouldComponentUpdate，来避免冗余的vdom，re-render的情况

2）Components 尽可能都用 pureRenderMixin，然后采用 redux 结构 + Immutable.js（感受一波）

    react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。

    而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom，支持双向绑定。

   总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。

3.类式的组件写法，还是声明式的写法

   react是类式的写法，api很少，

    而vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。

   react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展

对这一点，我个人比较喜欢React的做法，因为他更加纯粹更加原生，而Vue的做法显得有些独特，会把HTML弄得很乱。举个例子，说明React的好处：

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。