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

react和vue对比总结

作者: c云熙 | 来源:发表于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 中再声明下,这样显然是很奇怪但又不得不这样的做法。

    相关文章

      网友评论

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

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