0、項(xiàng)目規(guī)范

一、路由相關(guān)

npm i react-router-dom npm i react-router-config // 用于配置路由映射的關(guān)系數(shù)組

1. 路由重定向

訪問 /路徑 =》 重定向到 /discover路徑

2. 二級(jí)路由：

二、網(wǎng)絡(luò)請(qǐng)求相關(guān)

npm i axios

頁(yè)面中使用暴露 出來的request發(fā)送網(wǎng)絡(luò)請(qǐng)求：

封裝service：

config.js: 配置baseUrl、timeout等參數(shù)

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：創(chuàng)建一個(gè)axios實(shí)例暴露出去，供整個(gè)項(xiàng)目的所有頁(yè)面使用

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.發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí), 在界面的中間位置顯示Loading的組件// 2.某一些請(qǐng)求要求用戶必須攜帶token, 如果沒有攜帶, 那么直接跳轉(zhuǎn)到登錄頁(yè)面// 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("請(qǐng)求錯(cuò)誤");break;case 401:console.log("未授權(quán)訪問");break;default:console.log("其他錯(cuò)誤信息");}}return err; });export default instance;

三、redux相關(guān)

redux代碼規(guī)范如下：

• 每個(gè)模塊有自己獨(dú)立的reducer，通過combineReducer進(jìn)行合并；
• 異步請(qǐng)求代碼使用redux-thunk，并且寫在actionCreators中；
• redux直接采用redux hooks方式編寫，不再使用connect；

npm i redux react-redux redux-thunk

使用redux提供的hook來簡(jiǎn)化代碼：

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關(guān)聯(lián)要做兩件事：// 1. 獲取數(shù)據(jù)// 2. 進(jìn)行操作const dispatch = useDispatch()// 發(fā)送網(wǎng)絡(luò)請(qǐng)求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))*/

四、數(shù)據(jù)可變性的問題

在React開發(fā)中，我們總是會(huì)強(qiáng)調(diào)數(shù)據(jù)的不可變性：

• 無論是類組件中的state，還是redux中管理的state；
• 事實(shí)上在整個(gè)JavaScript編碼過程中，數(shù)據(jù)的不可變性都是非常重要的；

數(shù)據(jù)的可變性引發(fā)的問題（案例）：

• 我們明明沒有修改obj，只是修改了info，但是最終obj也被我們修改掉了；
• 原因非常簡(jiǎn)單，對(duì)象是引用類型，它們指向同一塊內(nèi)存空間，兩個(gè)引用都可以任意修改；

有沒有辦法解決上面的問題呢？

• 進(jìn)行對(duì)象的拷貝即可：Object.assign或擴(kuò)展運(yùn)算符

這種對(duì)象的淺拷貝有沒有問題呢？

• 從代碼的角度來說，沒有問題，也解決了我們實(shí)際開發(fā)中一些潛在風(fēng)險(xiǎn)；
• 從性能的角度來說，有問題，如果對(duì)象過于龐大，這種拷貝的方式會(huì)帶來性能問題以及內(nèi)存浪費(fèi)；

有人會(huì)說，開發(fā)中不都是這樣做的嗎？

• 從來如此，便是對(duì)的嗎？

認(rèn)識(shí)ImmutableJS

為了解決上面的問題，出現(xiàn)了Immutable對(duì)象的概念：

• Immutable對(duì)象的特點(diǎn)是只要修改了對(duì)象，就會(huì)返回一個(gè)
  新的對(duì)象，舊的對(duì)象不會(huì)發(fā)生改變；

但是這樣的方式就不會(huì)浪費(fèi)內(nèi)存了嗎？

• 為了節(jié)約內(nèi)存，又出現(xiàn)了一個(gè)新的算法：Persistent Data
  Structure（持久化數(shù)據(jù)結(jié)構(gòu)或一致性數(shù)據(jù)結(jié)構(gòu)）；

當(dāng)然，我們一聽到持久化第一反應(yīng)應(yīng)該是數(shù)據(jù)被保存到本地或
者數(shù)據(jù)庫(kù)，但是這里并不是這個(gè)含義：

• 用一種數(shù)據(jù)結(jié)構(gòu)來保存數(shù)據(jù)；
• 當(dāng)數(shù)據(jù)被修改時(shí)，會(huì)返回一個(gè)對(duì)象，但是新的對(duì)象會(huì)盡可
  能的利用之前的數(shù)據(jù)結(jié)構(gòu)而不會(huì)對(duì)內(nèi)存造成浪費(fèi)；

如何做到這一點(diǎn)呢？結(jié)構(gòu)共享。

ImutableJS常見API

注意：我這里只是演示了一些API，更多的方式可以參考官網(wǎng)；

JavaScript和ImmutableJS直接的轉(zhuǎn)換

• 對(duì)象轉(zhuǎn)換成Immutable對(duì)象：Map；
  

• 數(shù)組轉(zhuǎn)換成Immutable數(shù)組：List；
  

• 深層轉(zhuǎn)換：fromJS；
  

• Immutable類型轉(zhuǎn)成：toJS()；

ImmutableJS的基本操作：

• 修改數(shù)據(jù)：set
• 獲取數(shù)據(jù)：get

在項(xiàng)目中，結(jié)合Redux管理數(shù)據(jù)：

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

npm i redux-immutable

• 2.所有的reducer中的數(shù)據(jù)都轉(zhuǎn)換成Immutable類型的數(shù)據(jù)；

npm i immutable

五、style相關(guān)

.CSS采用普通CSS和styled-component結(jié)合來編寫（全局采用普通CSS、局部采用styled-component）;

六、在項(xiàng)目中：使用redux保存網(wǎng)絡(luò)請(qǐng)求獲取的數(shù)據(jù)，并供頁(yè)面使用的步驟

修改對(duì)應(yīng)組件recommend中的store/reducers.js文件：

在store/constants.js文件中新增 常量：

封裝api接口函數(shù)：

在store/actionCreator.js文件中新增getAction和changeAction函數(shù)：

在需要拿到數(shù)據(jù)的頁(yè)面中的
useEffect hook中派發(fā)一個(gè)getAction，在getAction函數(shù)中會(huì)執(zhí)行發(fā)送網(wǎng)絡(luò)請(qǐng)求的代碼，拿到響應(yīng)數(shù)據(jù)：

然后執(zhí)行changeAction函數(shù)：

在changeAction函數(shù)中會(huì)返回一個(gè)對(duì)象

{type: 'changeXXX',data: 發(fā)送網(wǎng)絡(luò)請(qǐng)求得到的數(shù)據(jù) }，

，然后redux內(nèi)部會(huì)執(zhí)行reducers函數(shù)：更新redux的state對(duì)象中存儲(chǔ)的數(shù)據(jù)

在需要使用數(shù)據(jù)的頁(yè)面中，通過redux提供的useSelector hook 拿到redux中保存的數(shù)據(jù)，供頁(yè)面展示使用：

總結(jié)

以上是生活随笔為你收集整理的react 网易云音乐实战项目笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。