memo的应用 & PureComponent
React.memo 为高阶组件。它与React.PureComponent非常相似。
默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。这与shouldComponentUpdate 方法的返回值相反。
PureComponent(纯组件) 用于避免不必要的渲染(运行render函数)
优化: 如果一个组件的状态和属性都没有发生变化,那么就没有必要重新渲染
PureComponent是一个组件,如果某个组件继承自它,则该组件的shouldComponentUpdate会进行优化,对属性和状态进行浅比较,如果相等则不会重新渲染
注意
PureComponent是进行浅比较 为了效率应该尽量使用PureComponent 永远不要直接更改之前的状态(不要–this.state.a = 123),而应该去覆盖(this.setState({a: 123})) 函数组件使用React.memo(函数组件)制作纯组件
immutable 方法
1.fromJS
2. toJS
3.get/getIn
4.set
5. merge
组件解构目录
├─api // 网路请求代码、工具类函数和相关配置 ├─application // 项目核心功能 ├─assets // 字体配置及全局样式 ├─baseUI // 基础 UI 轮子 ├─components // 可复用的 UI 组件 ├─routes // 路由配置文件 └─store //redux 相关文件 App.js // 根组件 index.js // 入口文件 serviceWorker.js // PWA 离线应用配置 style.js // 默认样式 复制代码
默认样式及字体图标准备
styled-components（CSS in JS）
style.js是全局样式引入APP.js根组件
路由配置
Home组件renderRoutes (route.routes)
全局样式
global-style.js
Home组件
Tab,TabItem,Top样式
redux 准备
创建store，reducer
项目中注入 store
App组件内部的
轮播
slider组件
<div className="before"></div>来添加背景填充
推荐列表
list组件
getCount 是一个工具类函数
图标和文字提供一个遮罩<div className="decorate"></div>
better-scroll
React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。
axios 请求封装
config.js 文件，里面编写 axios 的配置
request.js 用来封装不同的网络请求
redux 层开发
actionCreators.js// 放不同 action 的地方 constants.js // 常量集合，存放不同 action 的 type 值 index.js // 用来导出 reducer, actionCreators reducer.js // 存放 initialState 和 reducer 函数
组件连接 Redux
需要将 recommend 下的 reducer 注册到全局 store，在 store/reducer.js 中，内容如下
图片懒加载
react-lazyload
loading CSS3 的 animation-delay 特性
歌手页面
horizen-item组件使用better-Scroll组件实现，ref取得原生DOM。
Scroll组件开发歌手list组件。
数据层开发
actionCreators.js //放不同action的地方 constants.js //常量集合，存放不同action的type值 index.js //用来导出reducer，action reducer.js //存放initialState和reducer函数
分类和列表联动
设置更新书写函数触发更新。
上拉 / 下拉加载更多实现
引入2个loading组件上拉下拉。
图片懒加载
react-lazyload
防抖处理
当你频繁地下拉时，事实上事件回调函数也会被频繁触发，导致发送很多无意义的请求。因此这里对 Scroll 基础组件做一下防抖处理。
排行榜模块
使用Scroll，list组件
动画切换
CSSTransition
react-transition-group动画切换
Header组件
返回点击和画下走马灯
顶部和菜单布局
歌单列表布局
TopDesc 和 Menu和SongList
useCallback 优化 function props
将传给子组件的函数用 useCallback 包裹，这也是 useCallback 的常用场景。
使用组件复用，复用Album组件。
