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保存網絡請求獲取的數據，并供頁面使用的步驟

修改對應組件recommend中的store/reducers.js文件：

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

封裝api接口函數：

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

在需要拿到數據的頁面中的
useEffect hook中派發一個getAction，在getAction函數中會執行發送網絡請求的代碼，拿到響應數據：

然后執行changeAction函數：

在changeAction函數中會返回一個對象

{type: 'changeXXX',data: 發送網絡請求得到的數據 }，

，然后redux內部會執行reducers函數：更新redux的state對象中存儲的數據

在需要使用數據的頁面中，通過redux提供的useSelector hook 拿到redux中保存的數據，供頁面展示使用：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。