vue和react有哪些区别
-
vue鼓励template模板编译,写起来很接近标准的html
react推荐所有的模板通用jsx书写,会赋予很多编程能力
-
vue css写在单文件中,可以通过scoped属性模块化
react css全部写进了js中,即all in js,模块css 需要使用**.module.css方式编写
-
vue是按照MVVM模式设计的
react严格上只针对MVC的view层
-
virtual dom不一样,vue通过数据劫持的方式自动追踪每一个数据,追踪每一个组件的依赖关系,不需要重新渲染整个组件树
react每当数据状态改变的时候,就会重新执行render函数,有时候需要shouldComponentUpdate这个生命周期函数方法来控制,purecomponent就是重写了shouldComponentUpdate,对props和state的浅层对比
-
vue实现了数据的双向绑定
react的数据实是单向流动的,当通过dom改变状态时,也会重新执行render
-
state状态在react中不可改变,只能通过setState方法更新状态
-
更新渲染和优化
当组件状态发生变化,react的机制会触发整个组件树的重新渲染。可以通过shouldComponentUpdate或者pureComponentUpdate阻止子组件的重新渲染。
vue的渲染功能开箱即用,提供了优化重新渲染,其中系统在渲染过程中跟踪依赖关系进行相应的工作,
vue和react的相同点
- 都使用了virtual dom
- 提供了响应式(reactive)和组件化的视图组件
- 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库
性能方面
-
react在性能方面使用virtual dom实现没有vue的virtual dom实现好,相比较来说vue的virtual dom的实现更为轻量
-
在react应用中,当某个组件的状态的状态发生变化时,它会以该组件为根,重新渲染整个组件树(包括子组件)
如果避免不必要的子组件渲染,你可能需要在可能的地方去使用PureComponent或者手动shouldComponentUpdate方法,同时你可能会需要使用不可变的数据结构来使你的组件更容易优化
但是如果在使用PureComponet和shouldComponentUpdate时,需要保证该组件的整个子组件的渲染输出都是由该组件的props所决定,如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致,使得react中组件优化伴随着相当的心智负担
在vue中,组件的依赖是渲染过程中自动追踪的,所以系统能够精确的知道哪个组件确实被渲染,可以理解为自动获取了shouldComonent,并且没有上述子树问题限制,不用考虑此类组件的优化