使用React和Node.js製作網易雲音樂App的一次總結 【實現全部基本核心功能】

摘要： 一、技術選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript 作為開發語言，一開始嘗試使用TypeScript ，但是由於...

一、技術選型

• 語言選擇：

  • JavaScript
  • TypeScript
  • 最終選擇了JavaScript 作為開發語言，一開始嘗試使用TypeScript ，但是由於是移動端，antd-mobile的庫與TS 有那麼一些不相容，官方文件上也沒有像PC端那樣推薦你使用TS ，踩過坑，於是換回了JS 。
• 開發環境create-react-app 目前最好用的開發React 環境

• UI元件庫的選擇：

  • Swiper.js 個人認為Swiper 在對Vue 的支援會更好，官方文件上也沒有明確支援React
  • antd-mobile 阿里旗下的庫，PC 端的功能強大，但是更多使用場景是TO-C ，這裡只做嘗試使用，個人覺得TO-B 專案不建議使用，本專案中也僅僅使用到了一點點這個元件庫的功能
• 介面呼叫，網易雲音樂的原生介面,Music和Mv 都使用它的原生介面

• 開發所需的包

  • pubsub-js 對state 的管理的包
  • react-router-dom 路由
  • antd-mobile 官方推薦的按需載入配置
  • less-loader 對less的支援

• Node.js端

  • express 框架(有考慮KOA2框架，但是鑑於express 的成熟性沒有選擇)
  • puppeteer 爬蟲獲取資料的包
  • ws 模組，webSocket 的使用
  • request-promise-native ，使用Node.js的伺服器無跨域特性發送請求呼叫網易雲音樂介面
• 版本控制工具，毫無疑問使用Git
• 包管理器，這裡使用的是yarn ，不是npm

技術選型對於後期迭代非常重要，個人建議大專案上TS 和React 。

二、專案所需要到的知識點

由於是在移動端，H5 , C3 ， 事件處理 還有效能優化考慮的問題要更多

• 基礎知識點

  • 主打音樂類APP ,需要使用到的H5 標籤，<audio> <video> 等
  • C3 技術，canvas ,Animation 等製作一些動畫
  • 對移動端的一些特殊情況，比如圓角過圓等的處理。
  • JSX 語法，比較基本的JSX 語法一定是要非常熟練的
  • ES5/6 TypeScript ,為什麼需要TS 的知識？ 為了看懂原始碼，更好除錯程式碼。

• React 知識點

  • React 的事件機制，原生事件和合成事件的觸發哪個優先順序更高，事件代理，事件派發是什麼過程？
  • setState 的非同步同步問題，其實就是上面的事件機制，這個問題遇到的還是非常多的，如果搞不懂，那麼除錯起來非常困難
  • Reat 中追求元件化，個人喜歡元件化到極致，這樣方便除錯，在使用TS 和React 配合時，除錯真的非常簡單
  • 高階函式的使用 React中對於大量的重複邏輯函式，使用函式柯里化給予預設引數和封裝成高階函式使用
  • 高階元件 也是用得非常多，對於一些重複邏輯的元件，我們可以封裝成高階元件，即傳入值是一個元件，返回的是一個新的元件。
  • React V16 版本的Fiber 架構，跟之前的區別？ 新版本的執行render()時候，是分割成多個小任務，可取消中斷的過程，配合原生JS 的requestAnimationFrame （高優先級別的任務處理）和requestIdleCallback (低優先級別的任務處理),達到效能優化的目的。

  • React 的diff 演算法，三種diff 模式：

    • Tree diff 是優先對比兩棵樹的同級別DOM 節點，所以儘量不要將DOM 節點徹底刪除，否則會讓React 的render() 時間變長，具體在操作樣式時候這點會非常明顯，需要將一個元素隱藏時候如果display:none ，如果切換顯示和隱藏特別頻繁，那麼會出現閃屏。
    • Component diff 是對元件的diff ，其實我們可以通過shouldComponentUpdate 的生命週期函式返回值控制組件是否重新渲染，它的兩個引數是(nextProps,subState) ,返回值是ture 則重新渲染元件，反之NO 。
    • element diff ，為什麼在React 中需要元素要有一個唯一的key 值，因為底層的diff 演算法是四根指標，例如遍歷兩個元素old element: A,C,B,D ；new element B,C,A,D 。 如果沒有唯一的key值 ，那麼diff 演算法生成新的虛擬DOM 節點過程是：發現第一個不一樣，那麼直接插入B,C,A,D ; 但是如果有唯一的key值 ，那麼React的diff演算法 會發現，裡面有一樣的元素，那麼：插入B，C不動，插入A，D不動 。 所以唯一的key 值多重要？

三、移動端的不一樣

• 滑動時頁面警告

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
解決方法

* {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

• 事件點選穿透，禁止一個事件的預設行為，對其手指抬起事件繫結邏輯。
• antd-mobile 的按需載入需要配置更多，圖示和功能也更少。
• touches targettouches changedtouches 的區別,處理一些複雜邏輯會用到
• 在對製作SPA 單頁面應用時，頻繁切換的一些元素，做效能優化處理，利用上面提到的那些React 知識點，不然很可能出現閃屏，使用者體驗感差。
• 在http 通訊時，如果要將返回的資料setState ，那麼請注意setState 的同異步場景，準確把控渲染和設定狀態時間差邏輯，特別是多個請求，可以使用`promise.all 或者在setState的回撥函式中傳送請求，定時器把控時間。

比如下面這段程式碼，需要傳送10個請求並且將返回的資料整合，再把陣列中的10個promise 物件的值取出，設定成狀態重新渲染。

首先在生命週期函式componentDidMount中this.createSrc() 呼叫`
 reqMvList=() => {
const {data, src}=this.state;
const MvList=data.map(async item => {
const result=await reqMv(item.id)
const {data: {brs}}=result;
return brs[480]
})
return MvList
}
`呼叫createSrc函式後會先呼叫reqMvList函式，拿到結果`
createSrc=() => {
const result=this.reqMvList()
let arr=[]
result.forEach(item => {
item.then(res => {
arr=[res, ...arr]
return res
})
})
`上面將得到的10個promise物件中的值全部取出放到陣列中`
setTimeout(() => {
this.setState({
src:arr
})
}, 1000);
}
`如果此時不加定時器，那麼會先執行setState的程式碼，再去執行promise.then裡面的邏輯，
那麼其實狀態已經更新完了，但是資料是後面新增到arr中的，所以會出現狀態裡面沒有值的情況，
這裡需要加一個定時器解決。`

本次構建過程中涉及到的一些面試題

• http的ajax輪詢 長輪詢 keep-alive 和webSocket的區別
• 如何將一個元素從頁面上隱藏 根據場景需求，配合React的Fiber和diff演算法機制使用
• 高階函式，高階元件，函式柯里化的使用
• 如何在一個請求回來資料並且在設定狀態成功後傳送下面的請求（優雅傳送請求，平鋪資料）？
• 手寫一個promise
• promise.all 的使用
• pubsub-js 的使用
• React 的三大屬性
• 對於高階元件中的修飾器的使用，例如@withRouter
• cookie和cors 如何配合使用？cookie 可以跨域嗎？
• requestAnimationFrame 和requestIdleCallback 的區別，在React的Fiber中
• Node.js端 對request-promise-native 的使用
• 現在的效能優化真的只看DOMContentLoad和Load的時間嗎？ 可以從RASI 四個方面去看待。

由於太晚了，面試題的答案會放出來。喜歡的朋友請收藏，謝謝。 感謝@xpromise的技術支援