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

栏目: 编程语言 · 发布时间: 5年前

内容简介:两个月前用手机预览戳

引言

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

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

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

demo 选择

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

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

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

项目对比

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

根目录

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

src 目录

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

这里有几个区别:

  • React 版本并没有 router 文件 ,因为它支持 pathcomponent 属性,来定位要渲染的组件,就像这样:

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

    Vue router 似乎并没有提供 pathcomponent API ,所以必须要到 Router 配置里去读取 pathcomponent 属性。

  • React 也没有 mixins , 因为用 HOC 取代了 mixins 以我放在 components/HOC/index.js 里的代码为例:

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

    而且,你也可以在里面加上生命周期钩子等等,实际上, React 之前也是采用 mixins 实现的,不过后来改了。

  • 一个 .vue 组件对应 React 中三个文件? 在很多情况下,是这样子。Vue 的行为结构表现分离,很明显,而 React 的分离虽然不是很明显,但实际上也是有的。以 App.vue 为例

    • App.vue 里的 style 对应 React 里的 App.less ,毫无疑问
    • App.vue 里的 templateprops 对应 React 里的 App.jsReact 称为 Presentational Components ,一般只有一个 render 方法 return html , 譬如:

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

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

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

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

Vuex 和 redux 目录

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

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

selectors

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

actions

ReactactionsVuex 中的 actions 类似,都是发送指令,但不操作数据。

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

reducers

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

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

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

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

总结

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

技术栈的广度

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

API

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

求职

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据供应链

大数据供应链

娜达·R·桑德斯 (Nada R. Sanders) / 丁晓松 / 中国人民大学出版社 / 2015-7-1 / CNY 55.00

第一本大数据供应链落地之道的权威著作,全球顶级供应链管理专家娜达·桑德斯博士聚焦传统供应链模式向大数据转型,助力工业4.0时代智能供应链构建。 在靠大数据驱动供应链处于领先地位的企业中,45% 是零售商,如沃尔玛、亚马逊,而22%是快消企业,如戴尔电脑。他们都前所未有地掌控了自己的供应链。在库存管理、订单履行率、原材料和产品交付上具有更为广阔的视野。利用具有预见性的大数据分析结果,可以使供需......一起来看看 《大数据供应链》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具