从2张运行流程图看vue和react区别

vue和react都是做组件化的,针对view层,支持参数和state,有虚拟dom机制,数据驱动视图。各自配套的全局数据存储 vuex 和 redux也都是flux架构的实现,有action和state,数据变化会通知组件。但是vue、vuex和react、redux还是有很多不同的。

先放两张vue + vuex 和 react + redux的运行流程图:

是不是觉得整体架构类似,但是又有一些不同,下面我们对照上图梳理一下哪里不同:

组件方面(vue vs react):

1. 响应式渲染 vs 全局state对比

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

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

综上,react的 性能优化(shouldComponentUpdate)需要手动去做,而vue的响应式机制(Watcher)使得它不需要手动去优化性能。

2. 模板 vs jsx

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

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

数据存储方面(vuex vs redux):

1. action handler vs thunk/saga/observable middleware

redux只有reducer一层,action到达reducer之前会经过一系列中间件。而vuex比redux多了一层,action到达mutation handler之前,会经历中间件和action handler。

vuex文档中说,action handler是做一些异步操作的,而redux中并没有封装这些,异步操作是通过社区提供的redux-thunk、redux-saga或者redux-observable等中间件来管理的。

应用中异步请求几乎是必备的,vuex设计的时候多加了action handler这一层确实很方便。 react的思想是交给社区去做,通过 一些中间件来做异步管理的优点是有很多可选的方案。redux栈的obserbable和saga确实比vuex栈的action handler强大的多。

2. getter vs reselect

state的数据有时候需要经过一些处理和计算才能够使用,这段计算过程是可以复用的,react技术栈中使用社区的reselect可以做到,而且可以多层select。vuex内置了getter,可以做到复用计算过程和缓存,同时getter也可以组合。

区别就像异步的管理一样,一个是内置了,一个是交给社区去做。交给社区去做的优势是可以产生很多优秀的方案,但是会增加技术栈的学习成本和上手难度。内置的优势是技术栈学习成本低、上手快,但是方案变得不可替换了。

总结

除了vue和react的 响应式全局数据对比,还有 模板jsx的区别 是实现思想的区别以外,vuex和redux的区别更多的是内置交给社区去做的区别。

redux确实复杂,因为要组合一系列东西。社区中很多对redux封装的库,都是在向vuex的思路靠拢。

vue和react最主要的区别是设计思想的区别,以及功能是否内置的区别。

推荐阅读更多精彩内容

  • Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有...
    彬_仔阅读 23,767评论 16 112
  • 用了一年半的react系,由于新公司项目都是vue系的,所以开始学习vue相关框架。早就听说vue是angular...
    Coding_Life阅读 6,531评论 2 10
  • Foreword: 首先那要说明下,以下是我看到的一篇文章,但是原文是英文的,我只是做一个搬运工把他搬过来~主要也...
    Howie126313阅读 8,325评论 4 40
  • 今天普通话考试成绩出来了,只比上次的分数多0.7分,也就是说,依旧是二乙。这是我第二次考普通话了,而我的目标,是二...
    三毛的撒哈拉阅读 292评论 5 1
  • 1.藏在塔罗里的占卜符码 买了觉得亏,书薄字很大不说,跟符码也没什么大关系。硬要给每张牌都分什么元素我也很不赞同。...
    _ElsaLee_阅读 77评论 0 0