React.js hooks 练习案例-网易云音乐【day3】

成果展示

昨天又玩了一下，把首页的下半部分完成了。发现如果有好的美工，前端开发工程师可以节省，大量写样式的时间，就好像榜单部分大量采用背景图实现效果，原本我还想着要写比较复杂的颜色。好吧，我承认我错了，你赢了。

这是还没完成得部分。

新碟上架模块设计

这个组件是一页五个数据的轮播，并非首页顶部的轮播图一页一个数据，实现原理类似做分页。

import React, { memo, useEffect, useRef} from 'react'; // 导入react组件
import { shallowEqual, useDispatch, useSelector } from 'react-redux'; // 导入react-redux:hooks
import { Carousel } from 'antd'; // 导入antd 轮播图组件
import RTThemeHeaderRecommend from '@/components/theme-header/recommend'; // 导入推荐共享头部组件
import RTAlbumCover from '@/components/album-cover' // 导入新歌封面组件
import { 
  NEW_ALBUM_LIMIT, // 常量值 10
  NEW_ALBUM_CAROUSEL_TOTAL_PAGE, // 常量值 [0, 1]
  NEW_ALBUM_CAROUSEL_PAGE_SIZE // 常量值 5
} from '@/common/contants'; // 导入分页数量常量
import { getNewAlbumsAction } from '../../store/actionCreators'; // 导入请求数据模块
import { AlbumWrapper, } from './style'; // 导入js-css样式

// 新碟上架组件
export default memo(function RTNewAlbum() {
  // state模块（暂无）

  // 功能模块
  // 使用 redux hooks:useSelector 从 store 获取请求回来热门推荐数据
  // 使用 shallowEqual 自动做浅层比较判断组件是否需要更新（优化性能）
  const { newAlbums } = useSelector(state => ({
    newAlbums:state.getIn(["recommend","newAlbums"])
  }), shallowEqual);

  // 使用 hooks：refs
  const pageRef = useRef();

  // 使用 redux-hooks:useDispatch 触发action
  // 使用 hooks:useEffect 组件挂载后调用：新碟上架数据请求action
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getNewAlbumsAction(NEW_ALBUM_LIMIT))
  }, [dispatch])

  // 逻辑模块（暂无）

  // UI布局模块
  return (
    
       
        

           pageRef.current.prev() } />
          

            
              {
                // [0, 1] 此处为简化写法，真实业务需要按照请求数据条数 / 每页条数再生成对应长度的数组
                NEW_ALBUM_CAROUSEL_TOTAL_PAGE.map( item => { 
                  return (
                    

                      {
                        newAlbums.slice(item * NEW_ALBUM_CAROUSEL_PAGE_SIZE,
                          (item + 1) * NEW_ALBUM_CAROUSEL_PAGE_SIZE).map((item, index) => {
                            return {item.name}
                        })
                      } 
                    
                  )
                })            
              }
            
          
           pageRef.current.next() }/>
          
        
    
  )
})