酷狗音乐- 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，具体简历 戳这里