摘要：引言两个月前用全家桶实现过一次酷狗音乐，最近又用全家桶重构了下，最终成果和的实现基本一致，放个图手机预览戳版本版本。的行为结构表现分离，很明显，而的分离虽然不是很明显，但实际上也是有的。发送指令，最终会到里合并数据，与中的类似。
引言
两个月前用 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 和 Vue 中的 getters 有相似，但底层原理不同。举个例子，我们如果要从一个巨量的 array 里找到某个数据，比较耗性能怎么办？很明显可以对参数做个缓存，如果查询 id 和上一次一样，就返回上次的结果，不查询了。selectors 做的就是这个事。
React 的 actions 和 Vuex 中的 actions 类似，都是发送指令，但不操作数据。
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，具体简历 戳这里
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101409.html
摘要：，在听音乐的时候忽然想听腾格尔的钢铁之翼隐形的翅膀，在网易云上却找不到，就很气。于是想到了做一个，音乐搜索的功能，把所有想听的歌，能够一次性在酷狗网易云虾米等平台上找找完。本项目非常适合新手练习熟悉全家桶，欢迎哦。 React-music React Music WebApp，在听音乐的时候忽然想听腾格尔的钢铁之翼（隐形的翅膀），在网易云上却找不到，就很气。于是想到了做一个，音乐搜索的...
摘要：调用钩子渲染一波，然后把渲染后的元素赋值给并取代。大和小同为渐进式框架，提供了大量的对数据视图去进行处理。微信小程序我选择用原生主要是因为预览还要再开一个很不开心。 前言 刷了一波 react 文档,想找个东西练练手，在网上一看，什么实现一个 网易云、酷狗音乐、豆瓣 感觉找接口都够费神了,之前做过 vue 实现饿了么的一个系统，图片资源，mock 数据齐全，再加之样式写过了，所以直接就...
摘要：学习成本很低，另外官方有比较完善的中文文档。简单本身是没有错误，一个东西能以简单的方式解决难道不好吗关于这个中文文档居然还有人喷那些喜欢用的是不是英文能力差，我就再报以呵呵一笑。本身拥有中文文档就是一个优势，结果还成了被喷的地方。 前言 由于这段时间工作上也是挺忙的，就没有时间去写这个项目，中间一直都是写写停停，进度也是非常慢的。正好前几天都还比较空，就赶紧抓着空闲时间去写这个项目，最...
摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...
阅读 2879·2021-10-12 10:12
阅读 1330·2021-09-09 11:39
阅读 1692·2019-08-30 15:44
阅读 2160·2019-08-29 15:23
阅读 2789·2019-08-29 15:18
阅读 2790·2019-08-29 13:02
阅读 2580·2019-08-26 18:36
阅读 608·2019-08-26 12:08
