中的代码合并到webpack中。
安装 craco 并修改 package.json 里的 scripts 属性。
npm install @craco/craco
package.json
/* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }
然后在项目根目录创建一个 craco.config.js 用于修改默认配置。
const {resolve} = require("path") module.exports = { webpack: { alias: { "@": resolve(__dirname, "src"), "components": resolve(__dirname, "src/components"), "assets": resolve(__dirname, "src/assets"), "pages": resolve(__dirname, "src/pages"), "http": resolve(__dirname, "src/http"), "utils": resolve(__dirname, "src/utils"), } } };
数据管理
所以的数据都放在redux中管理，并且使用react-redux提供的hooks。
我们知道，reducer函数是一个纯函数，所以一般我们都会先拷贝以前的state数据，然后在做修改。但是这样对于数据量较大的对象来说，无疑是一种内存浪费。所以我们就可以使用ImmutableJS来解决这一问题。
ImmutableJS介绍
Immutable对象的特点是只要修改了对象，就会返回一个新的对象，旧的对象不会发生改变。
但是这样的方式就不会浪费内存了吗？
为了节约内存，又出现了一个新的算法：Persistent Data Structure（持久化数据结构或一致性数据结构）。
- 用一种数据结构来保存数据。
- 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费。具体用法和介绍，请访问官网
编写项目是遇到的样式问题
flex: 1对于省略号的理解
我们知道，添加文本省略号的要素
- 设置元素的宽度
- 设置元素不允许换行
- 设置超出文本省略号 单行文本省略
.text-nowrap { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
多行省略号
.text-more-line-nowrap { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
我们知道flex: 1设置后，设置flex盒子其他元素的宽度后，那么设置flex: 1的元素将占满整个剩余空间。但是这个是相对宽度。当我们添加文本省略号时，将它作为元素宽度，是不会有省略号效果的，文本依旧会超出容器。
td中设置flex布局，会破坏布局
<td class="body-title"> {index < 3 ? ( <img src={getSizeImage(item.al.picUrl, 50)} alt={item.name} /> ) : null} <div className="body-title-info"> <div className="btn-play"></div> <div className="info-name">{item.name}</div> </div> </td>
.body-title { display: flex; }
所以，我们做好在td中使用div包裹元素，然后做flex布局。
在自定义便签上写的className默认是无效的。
当我们想要在自定义标签上设置className来完成，我们特定的样式布局。该类名是无效的。
<SongsListWrapper className="wrap-v2 ==="> {playListCategoryList.length && playListCategoryList.map((item) => { return ( <MusicItem key={item.id} musicItemData={item} className="music-list-item" /> ) })} </SongsListWrapper>
所以，我们做样式定制，还需要设置props，将值传入到子组件中设置。
table表格th,td设置宽度无效
在做项目的时候，给table的td,th设置宽度，不生效。
所以需要将table加上
table-layout:fixed;
编写项目时遇到的逻辑问题
被路由包裹的NavLink在指定路径问题
当我们在子路由中设置NavLink跳转时，他的路径不需要携带父路由路径，不然会多余。
<NavLink to={`discover/toplist?id=${item.id}`}> <img src={getSizeImage(item.coverImgUrl, 40)} alt={item.commentThreadId} /> </NavLink>
在请求歌单详细数据时，重新刷新不会请求数据
这个不是不能请求的问题，只是我们渲染的时候，取每个元素，不能获取。会报错。所以报错就出现一种错觉。
所以在渲染元素时，注意加上逻辑判断。
部分页面展示
推荐
歌单
歌曲详情
