综合分析大神三元网易云音乐React+钩子

    import React, { lazy, Suspense } from "react";
    import { Redirect } from "react-router-dom";
    import HomeLayout from "../layouts/HomeLayout";
    import BlankLayout from "../layouts/BlankLayout";

// 路由懒加载
const SuspenseComponent = Component => props => {
  return (
    <Suspense fallback={null}>
      <Component {...props}></Component>
    </Suspense>
  )
}
// 组件懒加载
const RecommendComponent = lazy(() => import("../application/Recommend/"));

export default [
  {
    component: BlankLayout,
    routes: [
      {
        path: "/",
        component: HomeLayout,
        routes: [
          {
            path: "/",
            exact: true,
            render: () => <Redirect to={"/recommend"} />,
          },
          {
            path: "/recommend",
            component:  SuspenseComponent(RecommendComponent),
          },
        ],
      },
    ],
  },
];

  import React from "react";
  import { renderRoutes } from "react-router-config";
  // 从我们刚刚配置的路由可知 这个组件是最外层组件 所有路由级别组件都在这
  const Layout = ({ route }) => <>{renderRoutes(route.routes)};
  export default Layout

```js
  import React from "react";
  import { renderRoutes } from "react-router-config";

  function Home(props) {
    const { route } = props;
    return (
      

        {/* 将HomeLayout的子组件都放到这里 */}
        {renderRoutes(route.routes)}
      

    )
  }
  export default React.memo(Home);
  ```

    ```js
    import React from "react";
    import routes from "./routes/index.js";
    import { renderRoutes } from "react-router-config";
    import { HashRouter } from "react-router-dom";

function App() {
  return (
      <HashRouter>
        {renderRoutes(routes)}
      </HashRouter>
  );
}

export default App;
```	

    ```js
    const extendClick = () => {
      return `
        position: relative;
        &:before{
          content: '';
          position: absolute;
          top: -10px; bottom: -10px; left: -10px; right: -10px;
        };
      `;
    };

const noWrap = () => {
  return `
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  `;
};

const bgFull = () => {
  return `
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
  `
};

export default {
  "theme-color": "#d44439", //今天有绿吗
  "theme-color-shadow": "rgba(212, 68, 57, .5)",
  "font-color-light": "#f1f1f1",
  "font-color-light-shadow": "rgba(241, 241, 241, 0.6)",//略淡
  "font-color-desc": "#2E3030",
  "font-color-desc-v2": "#bba8a8", //略淡
  "font-size-ss": "10px",
  "font-size-s": "12px",
  "font-size-m": "14px",
  "font-size-l": "16px",
  "font-size-ll": "18px",
  "border-color": "#e4e4e4",
  "border-color-v2": "rgba(228, 228, 228, 0.1)",
  "background-color": "#f2f3f4",
  "background-color-shadow": "rgba(0, 0, 0, 0.3)",
  "highlight-background-color": "#fff",
  "official-red": "#E82001",
  extendClick,
  noWrap,
  bgFull
};
```	

    ```js
    import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    html, body{
        background: #f2f3f4;;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    a{
        text-decoration: none;
        color: #fff;
    }
`
```

     ```js
    import styled from "styled-components";
    import style from "../assets/global-style";

export const Top = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 10px;
  background: ${style["theme-color"]};
  & > span {
    line-height: 40px;
    color: #f1f1f1;
    font-size: 20px;
    &.iconfont {
      font-size: 25px;
    }
  }
`
```	

    ```js
    export const Tab = styled.div`
      height: 44px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      background: ${style["theme-color"]};
      a {
        flex: 1;
        padding: 2px 0;
        font-size: 14px;
        color: #e4e4e4;
        &.selected {
          span {
            padding: 3px 0;
            font-weight: 700;
            color: #f1f1f1;
            border-bottom: 2px solid #f1f1f1;
          }
        }
      }
    `;
    export const TabItem = styled.div`
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    `;
    ```

    ```js
    import axios from "axios";

export const baseUrl = "http://neteasecloudmusicapi.zhaoboy.com";

// 创建一个axios的实例及拦截器配置
const axiosInstance = axios.create({
  baseURL: baseUrl
});
// 响应拦截器，在获取响应之前处理数据
axiosInstance.interceptors.response.use(
  res => res.data,
  err => {
    console.log(err, "网络错误");
  }
);

export { axiosInstance };
```	

     ```js
    import * as actionTypes from './constants';
    import { fromJS } from 'immutable';
    import { getBannerRequest } from '../../../api/request';

export const changeBannerList = (data) => ({
  type: actionTypes.CHANGE_BANNER,
  data: fromJS(data)
});
// 获取 轮播图数据
export const getBannerList = () => {
  return (dispatch) => {
    getBannerRequest().then(data => {
      const action = changeBannerList(data.banners);
      dispatch(action);
    }).catch(() => {
      console.log("轮播图数据传输错误");
    }) 
  }
};
```	

    ```js
    import * as actionTypes from './constants';
    import { fromJS } from 'immutable';

const defaultState = fromJS({
  bannerList: [],
})
export default (state = defaultState, action) => {
  switch(action.type) {
    case actionTypes.CHANGE_BANNER:
      return state.set('bannerList', action.data);
    default:
      return state;
  }
}
```	

    ```js
    import React from "react";
    import routes from "./routes/index.js";
    import { renderRoutes } from "react-router-config";
    import { HashRouter } from "react-router-dom";
    import { IconStyle } from "./assets/iconfont/iconfont";
    import { Provider } from "react-redux";
    import store from "./store/index";

function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <IconStyle></IconStyle>
        {renderRoutes(routes)}
      </HashRouter>
    </Provider>
  );
}

export default App;
```	

```js
    function Recommend(props) {
      const { bannerList} = props;
      const { getBannerDataDispatch } = props;
      useEffect(() => {
        if(!bannerList.size){
          getBannerDataDispatch();
          console.log(bannerList);
        }
      }, []);
      return (
        

          Recommend
        

      )
    }
    ```

    ```js
    import styled from 'styled-components';
    import style from '../../assets/global-style';

export const SliderContainer = styled.div`
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: auto;
  background: white;
  .before{
    position: absolute;
    top: -300px;
    height: 400px;
    width: 100%;
    background: ${style["theme-color"]};
    z-index: 1;
  }
  .slider-container{
    position: relative;
    width: 98%;
    height: 160px;
    overflow: hidden;
    margin: auto;
    border-radius: 6px;
    .slider-nav{
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
    }
    .swiper-pagination-bullet-active{
      background: ${style["theme-color"]};
    }
  }
`
```

    ```js
    import React, { useEffect, useState } from 'react';
    import "swiper/swiper-bundle.min.css"; //这里引用的方式已经发生了变化
    import Swiper from "swiper";
    import { SliderContainer } from './style';
    function Slider(props) {
      const [sliderSwiper, setSliderSwiper] = useState(null);
      const { bannerList } = props;
      useEffect(() => {
        if(bannerList.length && !sliderSwiper){
          let sliderSwiper = new Swiper(".slider-container", {
            loop: true,
            autoplay: {
              delay: 3000,
              disableOnInteraction: false,
            },
            pagination: {el:'.swiper-pagination'},
          });
          setSliderSwiper(sliderSwiper);
        }

  }, [bannerList.length, sliderSwiper])
  return (
    <SliderContainer>
       <div className="before"></div>
       <div className="slider-container">
       <div className="swiper-wrapper">
         {
           bannerList.map(slider => {
             return (
              <div className="swiper-slide" key={slider.imageUrl}>
                 <div className="slider-nav">
                 <img src={slider.imageUrl} width="100%" height="100%" alt="推荐" />
                 </div>
                </div>
             )
           })
         }
       </div>
       <div className="swiper-pagination"></div>
       </div>
    </SliderContainer>
  )
}
export default React.memo(Slider);
```

    ```js
    import styled from 'styled-components';

export const Content = styled.div`
    position: fixed;
    top: 94px;
    left: 0;
    bottom: ${props => props.play > 0?"60px": 0};
    width: 100%;
`
```

    ```js
    import React from 'react';
    import styled, { keyframes } from 'styled-components';
    import style from '../../assets/global-style';

const loading = keyframes`
  0%, 100% {
    transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
  }
`
const LoadingWrapper = styled.div`
    >div {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      margin: auto;
      width: 60px;
      height: 60px;
      opacity: 0.6;
      border-radius: 50%;
      background-color: ${style["theme-color"]};
      animation: ${loading} 1.4s infinite ease-in;
    }
    >div:nth-child(2) {
      animation-delay: -0.7s;
    }
`
function Loading()  {
  return (
    <LoadingWrapper>
      <div></div>
      <div></div>
    </LoadingWrapper>
  );
}

export default React.memo(Loading);
```

    ```js
    import React from 'react';
    import styled, {keyframes} from 'styled-components';
    import style from '../../assets/global-style'

const dance = keyframes`
    0%, 40%, 100%{
      transform: scaleY(0.4);
      transform-origin: center 100%;
    }
    20%{
      transform: scaleY(1);
    }
`
const Loading = styled.div`
    height: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 10px;
    >div{
      display: inline-block;
      background-color: ${style["theme-color"]};
      height: 100%;
      width: 1px;
      margin-right:2px;
      animation: ${dance} 1s infinite;
    }
    >div:nth-child(2) {
      animation-delay: -0.4s;
    }
    >div:nth-child(3) {
      animation-delay: -0.6s;
    }
    >div:nth-child(4) {
      animation-delay: -0.5s;
    }
    >div:nth-child(5) {
      animation-delay: -0.2s;
    } 
`
function LoadingV2() {
  return (
    <Loading>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <span>拼命加载中...</span>
    </Loading>
  );
}

export default React.memo(LoadingV2);
```

```js
    const debounce = (func, delay) => {
      let timer;
      return function (...args) {
        if(timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          func.apply(this, args);
          clearTimeout(timer);
        }, delay);
      };
    };
    export { debounce }
```

    ```js
    import React, {
      forwardRef,
      useState,
      useEffect,
      useRef,
      useImperativeHandle,
      useMemo,
    } from "react";
    import PropTypes from "prop-types";
    import BScroll from "better-scroll";
    import styled from "styled-components";
    import { debounce } from "../../api/utils";
    import Loading from '../loading/index';
    import Loading2 from '../loading-v2/index';

const ScrollContainer = styled.div`
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

const PullUpLoading = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  width: 60px;
  height: 60px;
  margin: auto;
  z-index: 100;
`;

export const PullDownLoading = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  height: 30px;
  margin: auto;
  z-index: 100;
`;
const Scroll = forwardRef((props, ref) => {
  const [bScroll, setBScroll] = useState();
  const scrollContaninerRef = useRef();
  const {
    direction,
    click,
    refresh,
    pullUpLoading,
    pullDownLoading,
    bounceTop,
    bounceBottom,
  } = props;
  const { pullUp, pullDown, onScroll } = props;
  let pullUpDebounce = useMemo(() => {
    return debounce(pullUp, 500);
  }, [pullUp]);

  let pullDownDebounce = useMemo(() => {
    return debounce(pullDown, 500);
  }, [pullDown]);

  useEffect(() => {
    const scroll = new BScroll(scrollContaninerRef.current, {
      scrollX: direction === "horizental",
      scrollY: direction === "vertical",
      probeType: 3,
      click: click,
      bounce: {
        top: bounceTop,
        bottom: bounceBottom,
      },
    });
    setBScroll(scroll);
    return () => {
      setBScroll(null);
    };
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (!bScroll || !onScroll) return;
    bScroll.on("scroll", onScroll);
    return () => {
      bScroll.off("scroll", onScroll);
    };
  }, [onScroll, bScroll]);

  useEffect(() => {
    if (!bScroll || !pullUp) return;
    const handlePullUp = () => {
      //判断是否滑动到了底部
      if (bScroll.y <= bScroll.maxScrollY + 100) {
        pullUpDebounce();
      }
    };
    bScroll.on("scrollEnd", handlePullUp);
    return () => {
      bScroll.off("scrollEnd", handlePullUp);
    };
  }, [pullUp, pullUpDebounce, bScroll]);

  useEffect(() => {
    if (!bScroll || !pullDown) return;
    const handlePullDown = (pos) => {
      //判断用户的下拉动作
      if (pos.y > 50) {
        pullDownDebounce();
      }
    };
    bScroll.on("touchEnd", handlePullDown);
    return () => {
      bScroll.off("touchEnd", handlePullDown);
    };
  }, [pullDown, pullDownDebounce, bScroll]);

  useEffect(() => {
    if (refresh && bScroll) {
      bScroll.refresh();
    }
  });

  useImperativeHandle(ref, () => ({
    refresh() {
      if (bScroll) {
        bScroll.refresh();
        bScroll.scrollTo(0, 0);
      }
    },
    getBScroll() {
      if (bScroll) {
        return bScroll;
      }
    },
  }));
  const PullUpdisplayStyle = pullUpLoading
    ? { display: "" }
    : { display: "none" };
  const PullDowndisplayStyle = pullDownLoading
    ? { display: "" }
    : { display: "none" }<