React-网易云音乐PC端，三
数据获取，redux的使用，ImmutableJS的使用
数据来源
- 开源Node项目：binaryify.github，在本地上部署
路由重定向
进入页面后，即定位到/discover页面，可以采用重定向，
/discover页面的子路由的搭建和配置
1.子路由的路径配置上必须加上/discover；
2.在页面中使用renderRoutes渲染二级路由时，需从props中取得route，再取得route中的routes
axios的二次封装
1.封装一个request函数，返回一个promise对象；
2.创建axios实例->配置请求和响应拦截器->进行网络请求
redux的引入和顶层配置
1.将业务状态放入redux中进行管理，首先安装需要的依赖，redux，react-redux(Provider,connect,useDispatch,useSelector),redux-thunk(异步请求需要的中间件)
2.在store/index.js中创建store，使用createStore函数，该函数包含两个参数：reducer和加强（中间件的使用）
3.在一个项目中，每一个复杂的页面都拥有一个独立的reducer，所以在store/reducer.js文件中，使用combineReducers函数对reducer进行合并，参数为配置对象
4.中间件的使用，用applyMiddleware函数对中间件进行包裹；
5.Redux调试工具的使用：
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;，将applyMiddleware函数作为composeEnhancers的参数传入；6.store的共享：在App.js中，使用Provider组件将store共享
每个页面中单独配置redux
1.recommend页面：建立store文件夹，包括reducer.js;actionCreators.js(编写action对象);constants.js(定义常量);index.js(接口文件，导出reducer)
2.index.js：导入reducer，再导出reducer；
3.reducer.js:创建初始化状态对象；创建reducer函数；在reducer函数中对action对象的type进行匹配，并更改状态，最后返回更新的状态
4.actionCreators.js：主要包含两种action：发送网络请求的action函数；还有具体的action对象
发送网络请求获取轮播图数据
1.发送网络请求的代码封装在services/recommend.js中，封装一个函数，返回promise对象；
2.在recommend的actionCreators文件中，创建一个发送网络请求的函数，返回一个dispatch action对象的函数；
3.在recommend的reducer函数中，编写相应的状态更改代码；
4.在recommend中的index文件中，使用connect函数获取状态(mapStateToProps)，分发action(mapDispatchToProps);最终从props中获取需要的状态，在useEffect中发送网络请求；注意，后期可以不用谢connect函数，用useDispatch，useSelector代替；
5.useDispatch，useSelector的使用：
const dispatch = useDispatch();useSelector的第一个参数为函数，传入state，返回一个对象；6.优化：useSelector的一个弊端：对于返回的对象进行“===”的比较，所以会造成组件不必要的渲染；优化：传入第二个参数，shallowEqual，则数据会进行浅层比较，避免不必要的渲染；
优化：ImmutableJS的使用：
1.简单的复制会造成数据的可变性，带来潜在风险；可以采用Object.assign()或者扩展运算符的方法拷贝来解决（第一层深拷贝，第二层浅拷贝）；但大量的拷贝会造成性能问题和内存的浪费；
2.Immutable对象：只要发生了改变，就会生成一个新的对象，旧对象不会改变
3.Immutable为了节约内存，设计了一种新的算法：持久化数据结构，即数据修改时返回的新对象会尽可能的利用之前的数据结构，从而不对内存造成浪费；所以优化了性能；
4.简单的API：Map(将对象映射为IM对象，浅层转换)，List(将数组映射为IM对象，浅层转换),fromJS(深层转换)，set(设置数据)，get(获取数据)，getIn([])深层次的取数据