From 9a89858aa1d144491be3181309b56dbc7b09611d Mon Sep 17 00:00:00 2001
From: sanyuan <494130947@qq.com>
Date: Fri, 23 Aug 2019 17:53:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8E=92=E8=A1=8C=E6=A6=9C?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B6=E9=83=A8bug,=20=E6=AD=8C=E6=89=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E4=BB=A3=E7=A0=81=E6=94=B9=E4=B8=BAhooks?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 NeteaseCloudMusicApi             |   2 +-
 public/index.html                |   2 +-
 src/api/config.js                | 148 +++++++++++++++++++++-------
 src/application/Rank/style.js    |   1 -
 src/application/Singer/index.js  | 164 +++++++++++++++----------------
 src/application/Singer/style.js  |  27 +++++
 src/application/Singers/index.js |   8 +-
 src/baseUI/scroll/index.js       |   2 +-
 src/routes/index.js              |   2 +-
 9 files changed, 226 insertions(+), 130 deletions(-)
diff --git a/NeteaseCloudMusicApi b/NeteaseCloudMusicApi
index 629533e..dbd1d7a 160000
--- a/NeteaseCloudMusicApi
+++ b/NeteaseCloudMusicApi
@@ -1 +1 @@
-Subproject commit 629533e674e20e02a34166fedc4f68452713518a
+Subproject commit dbd1d7ab02eea1b15d3a87f76e6ccd169e9167f3
diff --git a/public/index.html b/public/index.html
index dd1ccfd..f619e65 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/api/config.js b/src/api/config.js
index ce8fb9d..c285a61 100644
--- a/src/api/config.js
+++ b/src/api/config.js
@@ -8,17 +8,18 @@ const axiosInstance = axios.create({
 });
 
 axiosInstance.interceptors.response.use(
-  res => res.data, 
+  res => res.data,
   err => {
     console.log(err, "网络错误");
   }
 );
 
-export { axiosInstance };
+export {
+  axiosInstance
+};
 
 //歌手种类
-export const categoryTypes = [
-  {
+export const categoryTypes = [{
     name: "华语男",
     key: "1001"
   },
@@ -81,37 +82,114 @@ export const categoryTypes = [
 ];
 
 //歌手首字母
-export const alphaTypes = [
-  { key: "A", name: "A" },
-  { key: "B", name: "B" },
-  { key: "C", name: "C" },
-  { key: "D", name: "D" },
-  { key: "E", name: "E" },
-  { key: "F", name: "F" },
-  { key: "G", name: "G" },
-  { key: "H", name: "H" },
-  { key: "I", name: "I" },
-  { key: "J", name: "J" },
-  { key: "K", name: "K" },
-  { key: "L", name: "L" },
-  { key: "M", name: "M" },
-  { key: "N", name: "N" },
-  { key: "O", name: "O" },
-  { key: "P", name: "P" },
-  { key: "Q", name: "Q" },
-  { key: "R", name: "R" },
-  { key: "S", name: "S" },
-  { key: "T", name: "T" },
-  { key: "U", name: "U" },
-  { key: "V", name: "V" },
-  { key: "W", name: "W" },
-  { key: "X", name: "X" },
-  { key: "Y", name: "Y" },
-  { key: "Z", name: "Z" }
+export const alphaTypes = [{
+    key: "A",
+    name: "A"
+  },
+  {
+    key: "B",
+    name: "B"
+  },
+  {
+    key: "C",
+    name: "C"
+  },
+  {
+    key: "D",
+    name: "D"
+  },
+  {
+    key: "E",
+    name: "E"
+  },
+  {
+    key: "F",
+    name: "F"
+  },
+  {
+    key: "G",
+    name: "G"
+  },
+  {
+    key: "H",
+    name: "H"
+  },
+  {
+    key: "I",
+    name: "I"
+  },
+  {
+    key: "J",
+    name: "J"
+  },
+  {
+    key: "K",
+    name: "K"
+  },
+  {
+    key: "L",
+    name: "L"
+  },
+  {
+    key: "M",
+    name: "M"
+  },
+  {
+    key: "N",
+    name: "N"
+  },
+  {
+    key: "O",
+    name: "O"
+  },
+  {
+    key: "P",
+    name: "P"
+  },
+  {
+    key: "Q",
+    name: "Q"
+  },
+  {
+    key: "R",
+    name: "R"
+  },
+  {
+    key: "S",
+    name: "S"
+  },
+  {
+    key: "T",
+    name: "T"
+  },
+  {
+    key: "U",
+    name: "U"
+  },
+  {
+    key: "V",
+    name: "V"
+  },
+  {
+    key: "W",
+    name: "W"
+  },
+  {
+    key: "X",
+    name: "X"
+  },
+  {
+    key: "Y",
+    name: "Y"
+  },
+  {
+    key: "Z",
+    name: "Z"
+  }
 ];
 
 //排行榜编号
-export const RankTypes = { 
+export const RankTypes = {
   '0': '云音乐新歌榜',
   '1': '云音乐热歌榜',
   '2': '网易原创歌曲榜',
@@ -135,7 +213,7 @@ export const RankTypes = {
   '20': '台湾Hito排行榜',
   '21': 'Beatport全球电子舞曲榜',
   '22': '云音乐ACG音乐榜',
-  '23': '江小白YOLO云音乐说唱榜' 
+  '23': '江小白YOLO云音乐说唱榜'
 }
 
 //歌单一页限定歌曲数量
@@ -149,6 +227,4 @@ export const playMode = {
   sequence: 0,
   loop: 1,
   random: 2
-}
-
-
+}
\ No newline at end of file
diff --git a/src/application/Rank/style.js b/src/application/Rank/style.js
index 04a9fd4..420f6ae 100644
--- a/src/application/Rank/style.js
+++ b/src/application/Rank/style.js
@@ -8,7 +8,6 @@ export const Container = styled.div`
   top: 90px;
   bottom: ${props => props.play > 0?"60px": 0};
   width: 100%;
-  overflow: hidden;
   .offical,.global {
     margin: 10px 5px;
     padding-top: 15px;
diff --git a/src/application/Singer/index.js b/src/application/Singer/index.js
index ef7192e..f07c0cc 100644
--- a/src/application/Singer/index.js
+++ b/src/application/Singer/index.js
@@ -1,5 +1,5 @@
-import React, { PureComponent } from 'react';
-import { Container } from './../Album/style';
+import React, { useState, useEffect, useRef } from 'react';
+import { Container } from './style';
 import Header from '../../baseUI/header/index'
 import { ImgWrapper, CollectButton, SongListWrapper, BgLayer } from "./style";
 import Scroll from '../../baseUI/scroll/index';
@@ -13,50 +13,56 @@ import { CSSTransition } from 'react-transition-group';
 import SongsList from '../SongList/';
 import MusicNote from '../../baseUI/music-note/index';
 
-// 歌手列表组件bug修复后一起重构成函数组件
-class Singer extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showStatus: true
-    }
-    this.collectButton = React.createRef();
-    this.imageWrapper = React.createRef();
-    this.songScroll = React.createRef();
-    this.Scroll = React.createRef();
-    this.header = React.createRef();
-    this.layer = React.createRef();
-    this.musicNoteRef = React.createRef();
-  } 
+function Singer(props) {
+  const initialHeight = useRef(0);
+  const [showStatus, setShowStatus] = useState(true);
 
-  componentDidMount() {
-    const id = this.props.match.params.id; 
-    this.props.getSingerDataDispatch(id);
-    this.height = this.imageWrapper.current.offsetHeight;
-    this.songScroll.current.style.top = `${this.height-5}px`;
-    this.layer.current.style.top = `${this.height-5}px`;
-    this.Scroll.current.refresh();
-  }
-  handleScroll(pos) {
-    const OFFSET = 5;//歌曲列表向上偏移5px
+  const OFFSET = 5;
+
+  const { artist, songs, loading, songsCount } = props;
+
+  const { getSingerDataDispatch } = props;
+
+  const collectButton = useRef();
+  const imageWrapper = useRef();
+  const songScrollWrapper = useRef();
+  const songScroll = useRef();
+  const header = useRef();
+  const layer = useRef();
+  const musicNoteRef = useRef();
+
+  useEffect(() => {
+    const id = props.match.params.id; 
+    getSingerDataDispatch(id);
+    let h = imageWrapper.current.offsetHeight;
+    initialHeight.current = h;
+    songScrollWrapper.current.style.top = `${h-OFFSET}px`;
+    //把遮罩先放在下面，以裹住歌曲列表
+    layer.current.style.top = `${h-OFFSET}px`;
+    songScroll.current.refresh();
+    // eslint-disable-next-line
+  }, [])
+
+  const handleScroll = (pos) => {
+    let height = initialHeight.current;
     const newY = pos.y;
-    const imageDOM = this.imageWrapper.current;
-    const buttonDOM = this.collectButton.current;
-    const headerDOM = this.header.current;
-    const layerDOM = this.layer.current;
-    const minScrollY = -(this.height-OFFSET) + HEADER_HEIGHT;
+    const imageDOM = imageWrapper.current;
+    const buttonDOM = collectButton.current;
+    const headerDOM = header.current;
+    const layerDOM = layer.current;
+    const minScrollY = -(height-OFFSET) + HEADER_HEIGHT;
 
-    const percent = Math.abs(newY / this.height);
+    const percent = Math.abs(newY / height);
     //说明: 在歌手页的布局中，歌单列表其实是没有自己的背景的，layerDOM其实是起一个遮罩的作用，给歌单内容提供白色背景
     //因此在处理的过程中，随着内容的滚动，遮罩也跟着移动
     if(newY > 0) {
       //处理往下拉的情况,效果：图片放大，按钮跟着偏移
       imageDOM.style["transform"] = `scale(${1+percent})`;
       buttonDOM.style["transform"] = `translate3d(0, ${newY}px, 0)`;
-      layerDOM.style.top = `${this.height-OFFSET+newY}px`;
+      layerDOM.style.top = `${height-OFFSET+newY}px`;
     } else if(newY >= minScrollY){
       //往上滑动，但是还没超过Header部分
-      layerDOM.style.top = `${this.height-OFFSET-Math.abs(newY)}px`;
+      layerDOM.style.top = `${height-OFFSET-Math.abs(newY)}px`;
       layerDOM.style.zIndex = 1;
       imageDOM.style.paddingTop = '75%';
       imageDOM.style.height = 0;
@@ -74,57 +80,47 @@ class Singer extends PureComponent {
       imageDOM.style.paddingTop = 0;
       imageDOM.style.zIndex = 99;
     }
-  }
-  handleBack() {
-    this.setState({
-      showStatus: false
-    } , () => {
-      setTimeout(() => {
-        this.props.history.push('/singers');
-      }, 300)
-    })
   };
-  musicAnimation(x, y) {
-    this.musicNoteRef.current.startAnimation({x, y});
+
+  const musicAnimation = (x, y) => {
+    musicNoteRef.current.startAnimation({x, y});
   }
-  render() {
-    const { artist, songs, loading } = this.props;
     
-    return (
-      <CSSTransition 
-        in={this.state.showStatus}  
-        timeout={300} 
-        classNames="fly" 
-        appear={true}
-        onExited={() => this.props.history.goBack()}
-      >
-        <Container>
-          <Header handleClick={() => this.handleBack()} title={artist.name} ref={this.header}></Header>
-          <ImgWrapper ref={this.imageWrapper} bgUrl={artist.picUrl}>
-            <div className="filter"></div>
-          </ImgWrapper>
-          <CollectButton ref={this.collectButton}>
-              <i className="iconfont">&#xe62d;</i>
-              <span className="text">收藏</span>
-          </CollectButton>
-          <BgLayer ref={this.layer}></BgLayer>
-          <SongListWrapper ref={this.songScroll} play={this.props.songsCount}>
-            <Scroll onScroll={(pos) => this.handleScroll(pos)} ref={this.Scroll}>
-              <SongsList
-                songs={songs}
-                showCollect={false}
-                usePageSplit={false}
-                musicAnimation={(x,y) =>this.musicAnimation(x,y)}
-              >
-              </SongsList>
-            </Scroll>
-          </SongListWrapper>
-          {loading ? <EnterLoading style={{"zIndex": 100}}><Loading></Loading></EnterLoading> : null}
-          <MusicNote ref={this.musicNoteRef} ></MusicNote>
-        </Container>
-      </CSSTransition>
-    )
-  }
+  return (
+    <CSSTransition 
+      in={showStatus}  
+      timeout={300} 
+      classNames="fly" 
+      appear={true}
+      unmountOnExit
+      onExited={() => props.history.goBack()}
+    >
+      <Container>
+        <Header handleClick={() => setShowStatus(false)} title={artist.name} ref={header}></Header>
+        <ImgWrapper ref={imageWrapper} bgUrl={artist.picUrl}>
+          <div className="filter"></div>
+        </ImgWrapper>
+        <CollectButton ref={collectButton}>
+          <i className="iconfont">&#xe62d;</i>
+          <span className="text">收藏</span>
+        </CollectButton>
+        <BgLayer ref={layer}></BgLayer>
+        <SongListWrapper ref={songScrollWrapper} play={songsCount}>
+          <Scroll onScroll={handleScroll} ref={songScroll}>
+            <SongsList
+              songs={songs}
+              showCollect={false}
+              usePageSplit={false}
+              musicAnimation={(x,y) =>musicAnimation(x,y)}
+            >
+            </SongsList>
+          </Scroll>
+        </SongListWrapper>
+        {loading ? <EnterLoading style={{"zIndex": 100}}><Loading></Loading></EnterLoading> : null}
+        <MusicNote ref={musicNoteRef} ></MusicNote>
+      </Container>
+    </CSSTransition>
+  )
 }
 
 // 映射Redux全局的state到组件的props上
@@ -145,4 +141,4 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 // 将ui组件包装成容器组件
-export default connect(mapStateToProps, mapDispatchToProps)(Singer);
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Singer));
diff --git a/src/application/Singer/style.js b/src/application/Singer/style.js
index 0bae593..09c8216 100644
--- a/src/application/Singer/style.js
+++ b/src/application/Singer/style.js
@@ -1,6 +1,33 @@
 import styled from 'styled-components';
 import style from '../../assets/global-style';
 
+export const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: ${props => props.play > 0 ? "60px": 0};
+  width: 100%;
+  z-index: 100;
+  overflow: hidden;
+  background: #f2f3f4;
+  transform-origin: right bottom;
+  &.fly-enter, &.fly-appear{
+    transform: rotateZ(30deg) translate3d(100%, 0, 0);
+  }
+  &.fly-enter-active, &.fly-appear-active{
+    transition: transform .3s;
+    transform: rotateZ(0deg) translate3d(0, 0, 0);
+  }
+  &.fly-exit{
+    transform: rotateZ(0deg) translate3d(0, 0, 0);
+  }
+  &.fly-exit-active{
+    transition: transform .3s;
+    transform: rotateZ(30deg) translate3d(100%, 0, 0);
+  }
+`
+
 export const ImgWrapper = styled.div`
   position: relative;
   width: 100%;
diff --git a/src/application/Singers/index.js b/src/application/Singers/index.js
index effceb9..5440ea8 100644
--- a/src/application/Singers/index.js
+++ b/src/application/Singers/index.js
@@ -15,11 +15,11 @@ import  LazyLoad, {forceCheck} from 'react-lazyload';
 import Loading from '../../baseUI/loading/index';
 import { renderRoutes } from 'react-router-config';
 
-// 这里采用class，之前写过hooks版，但是pageCount的更新存在bug, 后期bug修复之后换成函数式
+// 这里采用class，之前写过hooks版，但是pageCount的更新存在bug,
+// 有兴趣的小伙伴可以试试改为hooks版本， bug修复后换成函数式，欢迎大家提pr修正
 class Singers extends PureComponent{
   constructor(props) {
     super(props);
-
     Singers.scrollChild = React.createRef(null);
   }
   componentDidMount() {
@@ -57,7 +57,7 @@ class Singers extends PureComponent{
               <ListItem key={item.accountId+""+index} onClick={() => this.enterDetail(item.id)}>
                 <div className="img_wrapper">
                   <LazyLoad placeholder={<img width="100%" height="100%" src={require('./singer.png')} alt="music"/>}>
-                    <img src={`${item.picUrl}`+"?param=300x300"} width="100%" height="100%" alt="music"/>
+                    <img src={`${item.picUrl}?param=300x300`} width="100%" height="100%" alt="music"/>
                   </LazyLoad>
                 </div>
                 <span className="name">{item.name}</span>
@@ -71,7 +71,6 @@ class Singers extends PureComponent{
   render() {
     const { alpha, category, enterLoading, songsCount, pullUpLoading,pullDownLoading  } = this.props;
 
-
     return (
       <div>
         {/* 对于better-scroll来讲，其作用的元素外面必须要有一个尺寸确定的容器包裹，因此设置xxxContainer */}
@@ -129,7 +128,6 @@ const mapDispatchToProps = (dispatch) => {
     },
     // 滑到最底部刷新部分的处理
     pullUpRefresh(hot, count) {
-      console.log("hot", hot)
       dispatch(changePullUpLoading(true));
       dispatch(changePageCount(count+1));
       if(hot){
diff --git a/src/baseUI/scroll/index.js b/src/baseUI/scroll/index.js
index 342f984..9e3a179 100644
--- a/src/baseUI/scroll/index.js
+++ b/src/baseUI/scroll/index.js
@@ -118,7 +118,7 @@ Scroll.defaultProps = {
   direction: "vertical",
   click: true,
   refresh: true,
-  onScroll: null,
+  onScroll: () => {},
   pullUpLoading: false,
   pullDownLoading: false,
   pullUp: () => {},
diff --git a/src/routes/index.js b/src/routes/index.js
index 433971c..ec03c22 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -95,7 +95,7 @@ export default [
         }]
       },
       {
-        path: "/rank",
+        path: "/rank/",
         component: Rank,
         key: 'rank',
         routes:[{
