Vue和React的对比
2019-12-02

今晚我们来搞一搞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

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