摘要：在通信時，如果要將返回的數據，那么請注意的同異步場景，準確把控渲染和設置狀態時間差邏輯，特別是多個請求，可以使用或者在的回調函數中發送請求，定時器把控時間。

語言選擇：

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。

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

基礎知識點

主打音樂類APP,需要使用到的H5標簽，等

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值多重要？

滑動時頁面警告

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