从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最主要的区别是设计思想的区别，以及功能是否内置的区别。

作者：凌霄光
链接：https://www.jianshu.com/p/1ebe36fbdcda