美文网首页
react和vue对比总结

react和vue对比总结

作者: Ryan2C | 来源:发表于2019-06-11 23:32 被阅读0次

相似点:

同属于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 中再声明下,这样显然是很奇怪但又不得不这样的做法。

相关文章

  • Vue和React

    我们来对比一下Vue,React,Angular Vue和React对比 Vue和React相同点 基于MVC模式...

  • react和vue对比总结

    相似点: 同属于mvvm框架 都支持组件化, 都有Virtual DOM,组件化开发的概念,通过props参数进行...

  • vue对比react、Angular(转官方文档)

    vue对比react、Angular(转官方文档) React React 和 Vue 有许多相似之处,它们都有:...

  • Vue与React的区别

    Vue与React两个框架的区别和优势对比

  • VUE V.S. React 生命周期对比

    参考文章:vue生命周期和react生命周期对比

  • React/Vue 项目时为什么要在组件中写 key,其作用是什

    React/Vue 项目时为什么要在组件中写 key,其作用是什么? vue和react都是采用diff算法来对比...

  • vue和react 区别:

    vue和react 区别: 1、vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较 ...

  • 浅聊 React & Vue

    ​ 没有对比就没有伤害,今天突发奇想想对Vue和React的使用体验进行一下总结,随便比较下两者。网络上对比两...

  • react和vue对比

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提...

  • React和Vue对比

    相同点 都支持服务器端渲染 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实...

网友评论

      本文标题:react和vue对比总结

      本文链接:https://www.haomeiwen.com/subject/vpfhfctx.html