react与vue的区别

1.响应式原理不同

vue：挂载前，先给每一个Data属性进行遍历，注册getter，setter，也就是reactive化。在getter中维护了一个用来收集依赖的对象。挂载中，一是把template/el转成render函数。二是创建一个updateComponent函数，在这个函数中会调用上一步的render函数。三(依赖收集过程)是给每个组件实例new 一个自己的Watcher对象，然后把updateComponent函数传入，此时watcher会立即调用这个函数，然后会调用组件的render函数去生成虚拟DOM。在调用render的时候，就会需要用到data的属性值，此时会触发getter函数，在getter内部将当前的Watcher函数注册进sub里，进而完成依赖收集。挂载后，当data属性发生改变之后，触发setter，就会遍历sub里所有的watcher对象，通知它们去重新渲染组件。

react：React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。

2.组件写法不同

vue：Vue的组件写法是通过template的单文件组件格式。

react：React的组件写法是JSX+inline style，也就是吧HTML和CSS全部写进JavaScript中。

3.Diff算法不同

vue和react的diff算法都是进行同层次的比较，主要有以下两点不同：

vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是同类型的节点，只会修改节点属性。

vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到最后一个，从这点上来说vue的对比方式更加高效。

4.数据流不同

vue：Vue1.0中可以实现两种双向绑定：父子组件之间，props可以双向绑定；组件与DOM之间可以通过v-model双向绑定。Vue2.x中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且Vue2.x已经不鼓励组件对自己的 props进行任何修改了。

react：React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。