酷狗音乐- Vue / React 全家桶的两种实现

引言

两个月前用 Vue 全家桶实现过一次酷狗音乐，最近又用 React 全家桶重构了下，最终成果和 Vue的实现基本一致，放个图：

手机预览戳 Vue 版本, React 版本。

demo 选择

本来想用 React 全家桶重新选个项目，但是没有找到合适的，最终就重构了下，因为这个项目难度适中，非常适合练手。

接近 10 个单页，内容不多不少，需要 router
音乐播放作为全局组件，数据全局共享增删改，需要 redux, vuex
好几个公共组件，可以封装复用

项目源码在这里，欢迎大家 star、fork

项目对比

我从根目录开始分析，左边 vue 右边 react

根目录

src 目录

这里有几个区别：

React 版本并没有 router 文件，因为它支持 path 和 component 属性，来定位要渲染的组件，就像这样：

而 Vue router 似乎并没有提供 path 和 component API ，所以必须要到 Router 配置里去读取 path 和 component 属性。
React 也没有 mixins, 因为用 HOC 取代了 mixins。以我放在 components/HOC/index.js 里的代码为例：

而且，你也可以在里面加上生命周期钩子等等，实际上，React 之前也是采用 mixins 实现的，不过后来改了。
一个 .vue 组件对应 React 中三个文件？在很多情况下，是这样子。Vue 的行为结构表现分离，很明显，而 React 的分离虽然不是很明显，但实际上也是有的。以 App.vue 为例
- App.vue 里的 style 对应 React 里的 App.less ，毫无疑问
- App.vue 里的 template 和 props 对应 React 里的 App.js ，React 称为 Presentational Components，一般只有一个 render 方法 return html, 譬如：

App.vue 里剩余的部分，包括 ajax, mapState, 状态的变更，以及生命周期钩子等等，都是对应 React 里的 AppContainer.js ，React 称为 Container Components. 如图：

实际上， AppContainer.js 负责行为逻辑，而 App.js 负责结构展示， App.less 负责样式表现，依旧是行为/结构/表现的分离。只不过与 Vue 稍有不同而已。这一点上，React 多费些脑力和胶水代码。

Vuex 和 redux 目录

这里跟我的实现有关系，redux 可能是比 Vuex 麻烦些，但不至于图示如此夸张。因为我重构的时候改了逻辑。

`selectors`

selectors 和 Vue 中的 getters 有相似，但底层原理不同。举个例子，我们如果要从一个巨量的 array 里找到某个数据，比较耗性能怎么办？很明显可以对参数做个缓存，如果查询 id 和上一次一样，就返回上次的结果，不查询了。selectors 做的就是这个事。

`actions`

React 的 actions 和 Vuex 中的 actions 类似，都是发送指令，但不操作数据。

reducers

actions 发送指令，最终会到 reducers 里合并数据，与 Vue 中的 mutations 类似。

如果你注意的话，就会发现，reducers 里合并数据总是返回一个新对象。而 Vuex 中，我们是直接修改 state 的数据的。

这里其实牵涉到了 Vue 和 React 中的一个大不同。

总结

总体的目录和架构是类似的，不过具体用起来差别还不小。

技术栈的广度

Vue 全家桶只要加上 Vuex 和 Vue-router 就可以了，而 React 在读完 redux, react-redux, react-router 文档之后，会发现他们还拆分、引出了不少东西，譬如 reselect, redux-thunk 等等，并且 redux, reselect还不是局限于 React 的。

API

实践过程中，发现 Vue 中的一些类似的 API 在 React 中被进行了重构，比如 React 用 createRef 取代了 ref="string"，用 HOC 取代了 mixins 等等，虽然有些不习惯，但是感觉还好。

求职

本人最近正在找工作，有兴趣的欢迎私信哦，坐标上海，半年经验，比较了解 Vue+es6，了解一点 React，具体简历戳这里