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