美文网首页
Vue和React的对比

Vue和React的对比

作者: java技术分享师 | 来源:发表于2018-12-12 17:00 被阅读0次

今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧

1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。 react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染, 如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate, 然后在里面作了props和state的浅层对比;

而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom

2.react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机制也有问题, 就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控

详解:vue组件在初始化时会通过Object.defineProperty对每一个data属性建立对应的Wather,然后在模板编译时收集依赖。以后只要修改data的任何一个属性,就会触发视图的重新渲染,而且是精确的修改对应的vdom

     react的机制是每次setState的时候,调用shouldComponentUpdate,判断state或props改变需不需要重新render,如果返回true才会渲染。默认的实现是返回true,PureComponent的shouldComponnentUpdate浅层对比了两次state,考虑到性能,需要写好shouldComponentUpdate。

3. react的思路是all in js,通过js来生成html, 所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等

vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件, 可以把html、css、js写到一个文件中,html提供了模板引擎来处理

  详解:react渲染是使用jsx,用js来操作html,列表渲染、条件判断等都通过js来控制,而vue提供了模板的语法,支持指令、过滤器等模板功能,简化了渲染逻辑。在react组件里需要写大段js才能描述清楚的逻辑,使用vue的模板可以很简洁紧凑的表明。

     模板和jsx各有优缺点,jsx全部使用js来写逻辑,更加的灵活,也没什么学习成本,但是有些渲染逻辑表达会比较啰嗦。 模板因为是专门针对渲染设计的DSL,所以写一些渲染逻辑时会特别的简洁和紧凑,但学习成本高一些,并且扩展需要通过指令和过滤器的方式。

4.react是类式的写法,api很少 而vue是声明式的写法,通过传入各种options,api和参数都很多。 所以react结合typescript更容易一起写,vue稍微复杂。 vue结合vue-class-component也可以实现类式的写法,但是还是需要通过decorator来添加声明,并不纯粹

5.react可以通过高阶组件(Higher Order Components--HOC)来扩展,而vue需要通过mixins来扩展 React刚开始也有mixin的写法,通过React.createClass的api,不过现在很少用了。 Vue也不是不能实现高阶组件,只是特别麻烦,因为Vue对与组件的option做了各种处理, 想实现高阶组件就要知道每一个option是怎么处理的,然后正确的设置。

6.react做的事情很少,很多都交给社区去做,交给社区去做的优势是可以产生很多优秀的方案,但是会增加技术栈的学习成本和上手难度。

  vue很多东西都是内置的,写起来确实方便一些,内置的优势是技术栈学习成本低、上手快,但是方案变得不可替换了。

总结:浓缩出来就是 思性路写扩射 这六个字的简便记忆方法我不便给你们描述,我相信你们能悟出来,实在想知道的私信我好吧

  参考文档:

从2张运行流程图看vue和react区别:https://www.jianshu.com/p/1ebe36fbdcda

今天就到这里了,各位继续加油!!!

相关文章

  • Vue和React

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

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

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

  • Vue与React的区别

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

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

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

  • vue和react 区别:

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

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

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

  • vue.js面试题整理2

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

  • vue3.0特性展望

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

  • react和vue对比

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

  • React和Vue对比

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

网友评论

      本文标题:Vue和React的对比

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