内容简介:两个月前用手机预览戳
引言
两个月前用 Vue
全家桶实现过一次 酷狗音乐 ,最近又用 React
全家桶重构了下,最终成果和 Vue
的实现基本一致,放个图:
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 里的
- 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,具体简历 戳这里
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React全家桶+Koa+TS+mongoDB+Antd实现的简单TodoList
- 开源 | Go-Spring:滴滴开源的模仿 Java 的 Spring 全家桶实现的一套 Golang 的应用程序框架
- vue全家桶
- 升级vue全家桶过程记录
- SpringBootBucket 1.0.0 发布,SprintBoot全家桶
- 免费获取 JetBrains 全家桶正版 License 教程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。