使用React和Node.js製做音樂類App的一次總結

1、技術選型

• 語言選擇：

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

• UI組件庫的選擇：

  • Swiper.js 我的認爲Swiper在對Vue的支持會更好，官方文檔上也沒有明確支持React
  • antd-mobile阿里旗下的庫，PC端的功能強大，可是更多使用場景是 TO-B ，這裏只作嘗試使用，我的以爲TO-C項目不建議使用，本項目中也僅僅使用到了一點點這個組件庫的功能
  • 圖標庫，Echarts Bizcharts G2 選擇了 Bizcharts ，由於它對React組件化支持更好。

• 開發所需的包

  • 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。

2、項目所須要到的知識點

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

• 基礎知識點

  • 主打音樂類APP,須要使用到的H5標籤，<audio> <video>等
  • C3技術，canvas,Animation等製做一些動畫
  • 對移動端的一些特殊狀況，好比圓角過圓等的處理。
  • JSX語法，比較基本的JSX語法必定是要很是熟練的
  • ES5/6 TypeScript,爲何須要TS的知識？ 爲了看懂源碼，更好調試代碼。

• React知識點

  • React的事件機制，原生事件和合成事件的觸發哪一個優先級更高，事件代理，事件派發是什麼過程？
  • setState的異步同步問題，其實就是上面的事件機制，這個問題遇到的仍是很是多的，若是搞不懂，那麼調試起來很是困難
  • React中追求組件化，我的喜歡組件化到極致，這樣方便調試，在使用TS和React配合時，調試真的很是簡單
  • prop-types限制傳入的props的類型（隱約有TS的影子）
  • 高階函數的使用 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值多重要？

3、移動端的不同

• 滑動時頁面警告

[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的技術支持