• 基于React的仿QQ音乐(移动端)


    前言

    由于这段时间工作上也是挺忙的,就没有时间去写这个项目,中间一直都是写写停停,进度也是非常慢的。正好前几天都还比较空,就赶紧抓着空闲时间去写这个项目,最后紧赶慢赶地完成了。本项目采用了React的框架,可以帮助那些想学习React的同学们去深入学习React的项目的开发。写这个项目过程也是非常辛苦的,如果你觉得我写的还不错的话,麻烦各位给我一个收藏或者点赞,也或者去github上给我点个星,来当做对我的鼓励。不胜感激!

    源码地址

    https://github.com/ruichengpi...

    演示地址

    https://ruichengping.github.i...

    技术栈

    1. react
    2. react-router
    3. react-redux
    4. es6
    5. axios
    6. webpack

    已实现功能

    Tab-我的

    图片描述

    Tab-音乐馆

    图片描述

    Tab-发现

    图片描述

    侧滑栏

    图片描述

    播放列表

    图片描述

    播放器

    图片描述
    图片描述

    歌曲搜索

    图片描述
    图片描述

    歌单管理

    图片描述
    图片描述

    项目总结

    整个项目采用了React这个框架来构建,之前我都是用Vue用做开发的。正好借此机会做一个小小的对比,纯是个人使用的心得体会。如果你也有一些不一样的心得交流的话,欢迎交流。

    1. React相比Vue给我感受最深的就是他的优雅的组件化,用起来是非常爽,谁用谁知道,引用即可使用。而Vue在这块相对来说就要弱一点,引用了组件之后还要注册一下。当然这不是决定React组件化优于Vue决定性因素,更重要的Vue的模板语法以及它下面那套指令系统。相信用过的小伙伴们知道,Vue的template里面出现语法错误,追踪起来很费时费力的,很难定位到问题。另外这套指令系统在多人共同维护的大型项目中弊端很大,层层的指令嵌套使得代码阅读起来晦涩难懂,维护起来异常麻烦。而React在这上面给我感觉就好很多,代码可读性也非常高。
    2. Vue在双向数据绑定的体验上要优于React的,React采用的是Flux的单向数据流动。这在实现一些需要双向数据交互的功能上,Vue是占有优势的。
    3. Vue相比React更加轻量级。Vue只需要引用一个Vue.js即可使用,而React则要引用React.js、React-dom.js、babel.js(用于转换jsx的语法)。
    4. Vue在上手程度上要优于React。Vue学习成本很低,另外官方有比较完善的中文文档。而React官方则只有英文文档,另外学习成本也比较高。我见到网上某人喷只会Vue的是前端小白,我对这种人只能报以呵呵。简单本身是没有错误,一个东西能以简单的方式解决难道不好吗?关于这个中文文档居然还有人喷那些喜欢用Vue的是不是英文能力差,我就再报以呵呵一笑。本身拥有中文文档就是一个优势,结果还成了被喷的地方。首先,并不是所有人的英文能力都跟某些嘴炮大神那么牛逼的。其次,就算是英文能力牛逼的人,你敢说你阅读中文的能力会比你阅读英文能力差?
    5. 我个人感觉Vue的全家桶(不包括Vue)使用起来,我个人感觉是要比React的全家桶(不包括React)使用起来舒服的。
    6. 虽然Vue在一些细节上要比React好,但是不能觉得React就比Vue差。这种想法是错误。特别是大型应用上,使用React项目维护起来肯定是要比Vue要好的。当然这不代表Vue不能构建大型应用。
    7. React在社区生态建设上是比Vue好很多的,而且后面站着FaceBook。不怕遇到问题没人可以帮你解决的情况,而Vue的话就要稍微担心一下。
    最后强调一下:React和Vue都是非常棒的前端框架,建议大家都去学习一下。采用React或者是Vue还是要结合业务场景和现实情况做选择的。单纯说React还是Vue好,我个人觉得都是耍流氓。
  • 相关阅读:
    使用工具自动生成Linq类文件
    DateTime.MinValue和MaxValue引发的异常
    C# AD 验证登陆
    HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法
    清理sqlserver 2012 日志文件
    如何修改博客园插入代码的默认代码大小?
    hdu 1241:Oil Deposits(DFS)
    【2014年寒假日常记录表(2014.1.9—2.23,45天)】
    hdu 1016 Prime Ring Problem(DFS)
    蓝桥杯 历届试题 错误票据(水题,排序)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12860327.html
Copyright © 2020-2023  润新知