基于React Hooks、Ant Design打造网易云音乐播放器

2,856 阅读1分钟

本项目灵感来源于掘金-Vue全家桶高仿网易云音乐mac客户端版,在掘金看到这篇文章,笔者刚开始学习React,便打算使用最新的hooks来实现一遍,加深理解。特此感谢晨曦时梦见兮提供的vue版本。

技术栈

  • React、React-Router、React-Redux、Redux-thunk,使用Create-React-App脚手架创建。
  • ui库 Ant Design
  • 列表滚动 better-scroll
  • Sass(CSS 预处理器)
  • postcss-pxtorem

项目截图

首页

推荐歌单

歌单详情

音乐播放

笔者有话

项目中全部使用了函数组件,笔者对于reacthooks的使用也是刚刚入门,所以代码中还有许多需要完善的,包括使用了memo包裹组件之后,函数内部的方法也应该尽可能的使用useCallback或者useMemo进行处理。部分功能还未实现,包括歌词滚动等。另外还在使用react-redux的时候,没有关注最新的hooks版本,后续会计划将项目中现有的改造成最新版的使用。第一次写,就当是记录下,感谢各位的阅读。

源码地址

基于React16.8、Ant Design的高仿网易云客户端播放器

友情链接

🎵基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器