react 网易云音乐实战项目笔记

0、项目规范

在这里插入图片描述
在这里插入图片描述

一、路由相关

npm i react-router-dom
npm i react-router-config // 用于配置路由映射的关系数组

1. 路由重定向

访问 /路径 =》 重定向到 /discover路径
在这里插入图片描述

在这里插入图片描述

2. 二级路由：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

二、网络请求相关

npm i axios

页面中使用暴露 出来的request发送网络请求：

在这里插入图片描述

封装service：

config.js: 配置baseUrl、timeout等参数

const devBaseURL = "http://123.207.32.32:9001";
const proBaseURL = "http://123.207.32.32:9001";
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;export const TIMEOUT = 5000;

request.js：创建一个axios实例暴露出去，供整个项目的所有页面使用

import axios from 'axios';
import { BASE_URL, TIMEOUT } from "./config";
const instance = axios.create({baseURL: BASE_URL,timeout: TIMEOUT
});
instance.interceptors.request.use(config => {// 1.发送网络请求时, 在界面的中间位置显示Loading的组件// 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面// 3.params/data序列化的操作return config;
}, err => {
});
instance.interceptors.response.use(res => {return res.data;
}, err => {if (err && err.response) {switch (err.response.status) {case 400:console.log("请求错误");break;case 401:console.log("未授权访问");break;default:console.log("其他错误信息");}}return err;
});export default instance;

在这里插入图片描述
在这里插入图片描述

三、redux相关

redux代码规范如下：

  • 每个模块有自己独立的reducer，通过combineReducer进行合并；
  • 异步请求代码使用redux-thunk，并且写在actionCreators中；
  • redux直接采用redux hooks方式编写，不再使用connect；
npm i redux react-redux redux-thunk

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

使用redux提供的hook来简化代码：

在这里插入图片描述
在这里插入图片描述

import React, {memo, useEffect} from "react";
import {shallowEqual, useDispatch, useSelector} from "react-redux";
import {getTopBannerAction} from "./store/actionCreator";function HYRecommend(props) {const {topBanners} = useSelector((state) => {return {topBanners: state.recommend.topBanners}}, shallowEqual)// 组件和redux关联要做两件事：// 1. 获取数据// 2. 进行操作const dispatch = useDispatch()// 发送网络请求useEffect(() => {dispatch(getTopBannerAction())}, [dispatch])return (<div><h2>HYRecommend:{topBanners.length}</h2></div>)
}
export default memo(HYRecommend)/*function HYRecommend(props) {const {getBanners, topBanners} = propsuseEffect(() => {getBanners()}, [getBanners])return (<div><h2>HYRecommend: {topBanners.length}</h2></div>)
}
const mapStateToProps = (state) => {return {topBanners: state.recommend.topBanners}
}
const mapDispatchToProps = (dispatch) => {return {getBanners: () => {dispatch(getTopBannerAction())}}
}
export default connect(mapStateToProps, mapDispatchToProps)(memo(HYRecommend))*/

四、数据可变性的问题

在React开发中，我们总是会强调数据的不可变性：

  • 无论是类组件中的state，还是redux中管理的state；
  • 事实上在整个JavaScript编码过程中，数据的不可变性都是非常重要的；

数据的可变性引发的问题（案例）：
在这里插入图片描述

  • 我们明明没有修改obj，只是修改了info，但是最终obj也被我们修改掉了；
  • 原因非常简单，对象是引用类型，它们指向同一块内存空间，两个引用都可以任意修改；

有没有办法解决上面的问题呢？

  • 进行对象的拷贝即可：Object.assign或扩展运算符

这种对象的浅拷贝有没有问题呢？

  • 从代码的角度来说，没有问题，也解决了我们实际开发中一些潜在风险；
  • 从性能的角度来说，有问题，如果对象过于庞大，这种拷贝的方式会带来性能问题以及内存浪费；

有人会说，开发中不都是这样做的吗？

  • 从来如此，便是对的吗？

认识ImmutableJS

为了解决上面的问题，出现了Immutable对象的概念：

  • Immutable对象的特点是只要修改了对象，就会返回一个
    新的对象，旧的对象不会发生改变；

但是这样的方式就不会浪费内存了吗？

  • 为了节约内存，又出现了一个新的算法：Persistent Data
    Structure（持久化数据结构或一致性数据结构）；

当然，我们一听到持久化第一反应应该是数据被保存到本地或
者数据库，但是这里并不是这个含义：

  • 用一种数据结构来保存数据；
  • 当数据被修改时，会返回一个对象，但是新的对象会尽可
    能的利用之前的数据结构而不会对内存造成浪费；

如何做到这一点呢？结构共享。

ImutableJS常见API

注意：我这里只是演示了一些API，更多的方式可以参考官网；

JavaScript和ImmutableJS直接的转换

  • 对象转换成Immutable对象：Map；
    在这里插入图片描述

  • 数组转换成Immutable数组：List；
    在这里插入图片描述

  • 深层转换：fromJS；
    在这里插入图片描述

  • Immutable类型转成：toJS()；

ImmutableJS的基本操作：

  • 修改数据：set
  • 获取数据：get

在项目中，结合Redux管理数据：

  • 1.使用redux-immutable中的combineReducers；
npm i redux-immutable

在这里插入图片描述

  • 2.所有的reducer中的数据都转换成Immutable类型的数据；
npm i immutable

在这里插入图片描述

在这里插入图片描述

五、style相关

.CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS、局部采用styled-component）;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、在项目中：使用redux保存网络请求获取的数据，并供页面使用的步骤

  1. 修改对应组件recommend中的store/reducers.js文件：
    在这里插入图片描述

  2. 在store/constants.js文件中新增 常量：
    在这里插入图片描述

  3. 封装api接口函数：
    在这里插入图片描述

  4. 在store/actionCreator.js文件中新增getAction和changeAction函数：
    在这里插入图片描述

  5. 在需要拿到数据的页面中的
    useEffect hook中派发一个getAction，在getAction函数中会执行发送网络请求的代码，拿到响应数据：
    在这里插入图片描述

  6. 然后执行changeAction函数：
    在这里插入图片描述
    在changeAction函数中会返回一个对象

{type: 'changeXXX',data: 发送网络请求得到的数据
}，

，然后redux内部会执行reducers函数：更新redux的state对象中存储的数据
在这里插入图片描述

  1. 在需要使用数据的页面中，通过redux提供的useSelector hook 拿到redux中保存的数据，供页面展示使用：
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/470227.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

catchlog是什么软件_Log 重要性

catchlog是什么软件_Log 重要性

有一项目.Linux Tomcat Jdk1.6 配置.第一版已经完成,部署成功.但很长时间过去了.一年有余,客户突然要加个小功能,且还有个地方要改.功能,对编码的难度是微乎其微的.由于改动的功能比较偏,所以回归测试也比较轻松的通过.但在再次部署的时候出现了.众所周知,JAVA开发最终需要的…
阅读更多...
java 几个线程池的理解

java 几个线程池的理解

http://www.cnblogs.com/dolphin0520/p/3932921.html 这个文章写的很好 转载于:https://www.cnblogs.com/elnino/p/5807713.html
阅读更多...
react项目打包

react项目打包

一、react项目打包 对于使用脚手架创建的项目&#xff0c;打包是一件非常容易的事情&#xff1a; yarn build其他文件没有太多要解析的&#xff0c;我们看一下js文件&#xff1a; [hash].chunk.js 代表是所有依赖的第三方库&#xff0c; vendor(第三方库) 的代码&#xff1b…
阅读更多...
spark应用程序转换_Spark—RDD编程常用转换算子代码实例

spark应用程序转换_Spark—RDD编程常用转换算子代码实例

Spark—RDD编程常用转换算子代码实例Spark rdd 常用 Transformation 实例&#xff1a;1、def map[U: ClassTag](f: T > U): RDD[U] 将函数应用于RDD的每一元素&#xff0c;并返回一个新的RDDpackagetop.ruandbimportorg.apache.spark.{SparkConf, SparkContext}object Rdd…
阅读更多...
struts2中一些常用的写法 记录

struts2中一些常用的写法 记录

1.对日期进行处理 Date current new Date(); java.text.SimpleDateFormat sdf new java.text.SimpleDateFormat( "yyyy-MM-dd HH:mm:ss"); String time sdf.format(current); 或者&#xff1a; 插入当前时间&#xff1a;pstmt.setDate(4,new java.sql.Date(new ja…
阅读更多...
React SSR

React SSR

一、为什么需要SSR呢&#xff1f; 单页面富应用的局限&#xff1a; 之前我们开发的应用程序&#xff0c;如果直接请求可以看到上面几乎没有什么内容。 但是为什么我们页面可以看到大量的内容呢&#xff1f; 因为当我们请求下来静态资源之后会执行JS&#xff0c;JS会去请求数…
阅读更多...
linux 命令 读phy_PHY LINUX （转载整理）

linux 命令 读phy_PHY LINUX （转载整理）

每每分析网络问题的时候&#xff0c;总要梳理层次关系&#xff0c;本想自己写一个关于PHY的文档&#xff0c;找到网上有人写的一篇比较好&#xff0c;所以转载下来&#xff0c;仅供初学者参考。以太网 MAC(链路层)PHY(物理层/RTL8201F,88E1111);集成型DM9000&#xff0c;RTL813…
阅读更多...
Laravel框架开发规范-修订版

Laravel框架开发规范-修订版

1.PHP编码规范 1.1 标签 PHP 程序可以使用<?php ?>或<? ?>来界定PHP代码 在HTML 页面中嵌入纯变量时&#xff0c;使用<? ?>这样的形式 纯PHP类文件&#xff0c;文件开始标签使用<?php&#xff0c;闭合标签?>必须省略 1.2 编码 PHP文件必须使用…
阅读更多...
vue显示两位小数的方法_Vue toFixed保留两位小数的3种方式

vue显示两位小数的方法_Vue toFixed保留两位小数的3种方式

Vue toFixed保留两位小数的3种方式第一种&#xff1a;直接写在js里面&#xff0c;这是最简单的val.toFixed(2)第二种&#xff1a;在ElementUi表格中使用第三种&#xff1a;在取值符号中使用 {{}}定义一个方法towNumber(val) {return val.toFixed(2)}使用{{ towNumber(row.equiV…
阅读更多...
Tyvj 1176 火焰巨魔的惆怅

Tyvj 1176 火焰巨魔的惆怅

Tyvj 1176 火焰巨魔的惆怅 背景 TYVJ2月月赛第一道巨魔家族在某天受到了其他种族的屠杀&#xff0c;作为一个英雄&#xff0c;他主动担任了断后的任务&#xff0c;但是&#xff0c;在巨魔家族整体转移过后&#xff0c;火焰巨魔却被困住了&#xff0c;他出逃的方式也只有召唤小火…
阅读更多...
Vue3 组件通信学习笔记

Vue3 组件通信学习笔记

一、父子组件之间通信 父子组件之间如何进行通信呢&#xff1f; 父组件传递给子组件&#xff1a;通过props属性&#xff1b;子组件传递给父组件&#xff1a;通过$emit触发事件&#xff1b; 1.1 父组件传递给子组件 在开发中很常见的就是父子组件之间通信&#xff0c;比如父…
阅读更多...
js调用vlc_如何使用HTML5或JavaScript查看RTSP流，而不使用Real Player插件上的VLC插件等插件？...

js调用vlc_如何使用HTML5或JavaScript查看RTSP流，而不使用Real Player插件上的VLC插件等插件？...

The idea is to develop a cross-platform, standalone application that could play a video, streamed over RTSP, using HTML5 or JavaScript or any other web technology.解决方案RTSP is a protocol on the same level as HTTP. Its impossible to do RTSP via HTTP.The …
阅读更多...
HDU-3729 二分匹配 匈牙利算法

HDU-3729 二分匹配 匈牙利算法

题目大意&#xff1a;学生给出其成绩区间&#xff0c;但可能出现矛盾情况&#xff0c;找出合理组合使没有说谎的人尽可能多&#xff0c;并按maximum lexicographic规则输出组合。 //用学生去和成绩匹配&#xff0c;成绩区间就是学生可以匹配的成绩#include <iostream> #i…
阅读更多...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）

Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）

一、认识插槽Slot 在开发中&#xff0c;我们会经常封装一个个可复用的组件&#xff1a; 前面我们会通过props传递给组件一些数据&#xff0c;让组件来进行展示&#xff1b;但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等这…
阅读更多...
dbcc dbreindex server sql_DBCC DBREINDEX重建索引提高SQL Server性能

dbcc dbreindex server sql_DBCC DBREINDEX重建索引提高SQL Server性能

DBCC DBREINDEX重建索引提高SQL Server性能[转载]大多数SQL Server表需要索引来提高数据的访问速度&#xff0c;如果没有索引&#xff0c;SQL Server要进行表格扫描读取表中的每一个记录才能找到索要的数据。索引可以分为簇索引和非簇索引&#xff0c;簇索引通过重排表中的数据…
阅读更多...
Vue动态组件和组件缓存

Vue动态组件和组件缓存

一、切换组件案例 比如我们现在想要实现了一个功能&#xff1a; 点击一个tab-bar&#xff0c;切换不同的组件显示&#xff1b; 这个案例我们可以通过两种不同的实现思路来实现&#xff1a; 方式一&#xff1a;通过v-if来判断&#xff0c;显示不同的组件&#xff1b; 方式二…
阅读更多...
hidl 原理分析_一个 health service 不生效问题引出的一点知识

hidl 原理分析_一个 health service 不生效问题引出的一点知识

从 Android P 开始&#xff0c;Google 开始推荐厂家再定制一个 health 。前不久遇到一个定制 health 中的信息未成功反应到 Framework 的问题&#xff0c;在分析解决问题的过程中&#xff0c;学习到了一点新知识&#xff0c;所以就在这篇文章里根据解决问题的流程做一个小小的记…
阅读更多...
比较list集合相等的方法

比较list集合相等的方法

1. 内容相同,不管顺序! public static boolean isListContentEquals(List<String> src, List<String> des){return src.containsAll(des) && des.containsAll(src);} 2.内容和顺序都完全一样 方法1: public static boolean isListsCompletelyEqual(List<…
阅读更多...
Webpack的代码分包Vue3中定义异步组件分包refs的使用

Webpack的代码分包Vue3中定义异步组件分包refs的使用

一、默认的打包过程&#xff1a; 默认情况下&#xff0c;在构建整个组件树的过程中&#xff0c;因为组件和组件之间是通过模块化直接依赖的&#xff0c;那么webpack在打包时就会将组件模块打包到一起&#xff08;比如一个app.js文件中&#xff09;&#xff1b; 这个时候随着项…
阅读更多...
经典JS

经典JS

用apply把document当作this传入getId函数&#xff0c;帮助“修正”this; document.getElementById (function (func) {return function () {return func.apply(document, arguments);} })(document.getElementById);//调用 var getId document.getElementById; var div getI…
阅读更多...
最新文章

Copyright @ 2022~2023