首页：
排行榜：
歌单：
主播电台：
歌手：
新碟上架：
craco还可以进行wepback 进行自定义配置、antd 组件按需加载、支持 less等操作。不选择 npm run eject 是因为eject是不可逆操作。
npm i @craco/craco
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
通过 import './assets/css/reset.css'引入。但 reset.css 存在一个很大的问题是它将所有的浏览器的默认样式清除，从而达到所有浏览器样式的统一的目的，但这么操作会导致浏览器原本的默认样式失去意义。比起 reset.css 我更倾向于使用 normalize.css 来统一样式， normalize.css 是在尽量保留浏览器的默认样式的基础上，不进行太多的重置，这样保留了有价值的默认值，它还可以模块化引入、修复了浏览器的一些 bug、没有复杂的继承链。
本次项目很多地方使用了CSS Sprites 精灵图技术，可以有效减少图片的请求次数，优化性能。
React.memo是一个高阶函数，与类组件里面的 PureComponent类似，它传递一个组件进去，返回一个可以记忆的组件，在 props 不变的情况下，这个被包裹的组件是不会重新渲染的，这样就减少了 render 的渲染次数，从而提高了性能。
export default memo(function App() {
return (
<div className="App">
</div>
)
})
import styled from 'styled-components'引入css 文件import { Input } from 'antd'引入import { SearchOutlined } from '@ant-design/icons'引入背景的模糊效果使用高斯模糊，通过改变请求的url ?imageView&blur=40x20 实现，css可以用filter: blur(20px);实现
以下内容都被抽取到 components目录中。
图片的处理：在 utils 目录的 format-utils 下编写 getSizeImage 函数，根据输入的参数来决定图片的大小
对数字的处理：在 utils 目录的 format-utils 下编写 getCount 函数，格式化歌曲播放数量，让用户可以更直观的知道播放次数
// 播放/暂停音乐
const playMusic = useCallback(() => {
isPlaying ? audioRef.current.pause() : audioRef.current.play()
setIsPlaying(!isPlaying)
}, [isPlaying])
value={progress} 属性获取当前播放进度，从而设置audio的播放进度。//进度改变触发onchange时间，调用该函数
const sliderChange = useCallback((value) => {
setIsChanging(true)
const currentTime = value / 100 * duration / 1000
setCurrentTime(currentTime * 1000)
setProgress(value)
}, [duration])
// 获取状态中的播放类型
sequence: state.getIn(['player', 'sequence']),
// 点击切换播放类型
<button className="sprite_playbar btn loop" onClick={changeSequence}></button>
// 改变播放类型
const changeSequence = () => {
let currentSequence = sequence + 1
if (currentSequence > 2) { currentSequence = 0 }
dispatch(changeSequenceAction(currentSequence))
}
isChanging, setIsChanging = useState(false)，来判断当前进度条是否正在改变，以便于当用户正在播放音乐并滑动滚动条时，滚动条可以滑动// 播放歌曲进度条部分
// 滑动中的位置
const sliderChange = useCallback((value) => {
setIsChanging(true)
// 滑动滚动条时，实时更新时间的改变
const currentTime = value / 100 * duration / 1000
setCurrentTime(currentTime * 1000)
setProgress(value)
}, [duration])
// 滑动后的位置
const sliderAfterChange = useCallback((value) => {
//滑动进度条后的进度条时间
const currentTime = value / 100 * duration / 1000
audioRef.current.currentTime = currentTime
// 重新更新进度条时间
setCurrentTime(currentTime * 1000)
setIsChanging(false)
//如果没有播放音乐，当滑动滚动条后开始播放音乐
if (!isPlaying) {
playMusic()
}
}, [duration, isPlaying, playMusic])
utils/parse-lyric下格式化歌词，原理就是将字符串转为数组，数组的每一项为 一个对象 { time, content }包含了时间及该时间的歌词。源代码：
background-image: url(${require("@/assets/img/recommend-top-bg.png")});
解决方法：为图片添加.default
background-image: url(${require("@/assets/img/recommend-top-bg.png").default});
setCurrentTime(e.target.currentTime * 1000)，但是e.target.currentTime无法更加实时的获得当前滑动的数据，所以出现回弹。 const sliderAfterChange = useCallback((value) => {
// 获取滑动进度条后的进度条时间
const currentTime = value / 100 * duration / 1000
// 设置当前时间
audioRef.current.currentTime = currentTime
setCurrentTime(currentTime * 1000)
}, [duration])