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等单向数据流的状态管理框架,因此很多时候我们感受不到这一点的区别了。


版权声明:本文为wyh666csdn原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>