raotaohub / react-music Goto Github PK

个人学习之作品，借鉴掘金大佬神三元的案例，为未来开发zune做技术储备。

• Component 的 2 个问题

1. 只要执行 setState(),即使不改变状态数据, 组件也会重新 render() ==> 效率低
2. 只当前组件重新 render(), 就会自动重新 render 子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

解决方式 1：重写 shouldComponentUpdate()方法

解决方式 2：使用 PureComponent

解决方式 3：本项目采用方案--React.memo()是一个高阶函数，它与 React.PureComponent 类似，但是一个函数组件而非一个类。

• scroll 的参数

Scroll.propTypes = {
  direction: PropTypes.oneOf(["vertical", "horizental"]), // 滚动的方向
  click: true, // 是否支持点击
  refresh: PropTypes.bool, // 是否刷新
  onScroll: PropTypes.func, // 滑动触发的回调函数
  pullUp: PropTypes.func, // 上拉加载逻辑
  pullDown: PropTypes.func, // 下拉加载逻辑
  pullUpLoading: PropTypes.bool, // 是否显示上拉 loading 动画
  pullDownLoading: PropTypes.bool, // 是否显示下拉 loading 动画
  bounceTop: PropTypes.bool, // 是否支持向上吸顶
  bounceBottom: PropTypes.bool, // 是否支持向下吸底
};

• forwardRef 的使用

const Scroll = forwardRef((props, ref) => {
  // 编写组件内容
});

• 采取一个成熟的方案 react-lazyload 库 yarn add react-lazyload

1. 图片懒加载 \react-music\src\components\list\index.js <LazyLoad ..>...
2. 组件懒加载 暂时未实施

在\react-music\src\application\Recommend\index.js useEffect()调用中加 1 个判断当前数据量的逻辑

1. useMemo？？？？？？？？？？？？？？有待深入考究

action type 规范

• MODULEPAGE_ACTION_OTHER 模块名页面名操作名其他

$ npm install react-transition-group --save

一个成熟的react过渡动画库

实现点击跳转的一个动画效果

  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); ⭐
  }
设定 transfrom 的固定点，接下来的动画都是绕这个点旋转或平移
设置 rotateZ 的值，让整个页面能够拥有 Z 坐标方向的矢量