一、热门推荐组件结构搭建
由于"热门推荐""新碟上架""榜单"的头部结构一致，所以可以封装成一个公用组件放在src/components下，便于复用。
然后再从组件中接收传过来的内容，渲染头部结构。 并且设置头部结构的样式styled.ts中。
在"热门推荐"组件中引入头部组件，并利用父传子，将内容传给头部组件中。
完成"热门推荐"组件中的样式
在recommend/store/index.ts中存储热门推荐组件中用到的数据 service/recommend.ts中封装接口方法
store/recommend.ts:
interface IRecommendData { hotRecommends: any[] }
const initialState: IRecommendState = { banners: [], hotRecommends: [] }
再到组件中useEffect中调用异步请求方法
然后再到"热门推荐"组件中利用useAppSelector获取数据，利用map方法渲染数据
将"热门推荐"组件中的这些封装成一个个item组件 便于其他组件使用，所以作为公用组件封装在src/components下
并完成组件样式设置。
在"热门推荐"组件中传入数据
播放量数据格式化以及图片格式化显示：
播放量数据由49987-->4万 图片按照要求尺寸显示
封装一个工具函数在utils文件夹下
然后再到item组件中调用工具函数，实现格式化显示。
{formatCount(itemData.playCount)} {getImageSize(itemData.picUrl, 140)}
二、"新碟上架"组件结构搭建以及功能展示
1、先搭建头部结构，引入先前封装好的公用头部结构，并且传入内容到头部组件中。
并在"新碟上架"组件中使用
搭建"新碟上架"组件的结构 
并且实现样式配置
然后再在service/recommend.ts文件中封装接口方法用于请求新碟上架组件中用到的轮播图数据
再到store/recommend.ts文件中存储数据，书写异步请求方法
interface IRecommendState { newAlbums:any[] } const initialState :IRecommendState={ newAlbums:[] }
在recommend/index.tsx文件中的useEffect中调用异步请求方法，获取轮播图数据。 再到"新碟上架"组件中，利用useAppSelector拿到redux中存储的轮播图数据，再用map方法渲染在组件中显示。
这里的轮播图数据是这样显示的：
1、首先一共只有两页轮播图 2、其次，每一页轮播图中只会显示五张图片。
拿到轮播图数据，利用slice方法切分，第一页 slice(0,5),第二页 slice(5,11)
{[0,1].map((item)=>{ return ( //item的值是0和1，表示第一页和第二页 {newAlbums.slice(item5,(item+15)).map((iten)=>{ // iten的值是轮播图中的每一张图片，每一页显示五张图片 return ( .... )}))
轮播图数据渲染完毕后，再去实现图片左右切换功能。利用组件自带的prev()和next()方法
先拿到整个轮播图组件对象，跟top-banner中获取轮播图组件对象的方法一致
"新碟上架"中的这些碟片可以封装成一个个的item组件，再利用父传子将图片数据传入item组件中进行渲染。
src/components/new-album-item/index.tsx 先搭建item组件的结构，然后再书写样式文件，最后在接收数据进行渲染内容。
在这里，显示的图片也是需要格式化显示的，要让图片按照要求尺寸显示。调用getImageSize方法。
三、"榜单"组件结构搭建以及功能展示
1、先引入头部结构组件
2、再实现下方的榜单组件搭建。
service/recommend.ts文件中封装请求方法，接口方法要求传入一个number型的id值作为参数。服务器会根据传入的id值来分配各个对应榜单的数据。
在store/recommend.ts文件中存储数据，封装异步方法，获取每一个榜单的数据。 但是要求各个榜单的数据都是同一时间展示在组件中的，所以我们要用到promise数组。
目的：利用promise数组来存储各个获取到的榜单数据，然后再利用promise.all()方法，只有当每一个榜单的数据都成功获取后，才会执行该方法下的then方法。
声明一个promise型的数组：
const promises :Promise[]=[] //这里的T就是数组中元素的数据类型
再利用promise.all方法：Promise.all(promises).then()
保证只有当每一个榜单的数据都成功获取后，才会执行then方法。
准备一个id数组，存放着每一个榜单对应的id值。
分别传入不同的id值，调用接口方法，获取到不同的榜单数据，push添加至promises数组中。
最后执行promise.all方法。
这样就可以实现三个榜单的数据都是统一显示的。
再将数据渲染在"榜单"组件中。
由于这三个榜单的结构一致，所以可以封装成一个item组件。 recommend/c-cpns/top-ranking-item/index.tsx:
在完成样式的搭建
五、"推荐组件"下的用户登录组件结构搭建
六、"入驻歌手"组件结构搭建及功能展示
发现这两个组件中的头部结构也是一致的，所以可以封装到src/components下，便于多组件复用。
在"入驻歌手"组件中引入头部组件，并将内容传入
service/recommend.ts下封装接口方法
store/recommend.ts下书写异步请求
在组件中获取数据进行渲染
七、"热门主播"组件结构搭建及功能演示 与"入驻歌手"同理
