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

語言選擇：

JavaScript

TypeScript

最終選擇了JavaScript作為開發(fā)語言，一開始嘗試使用TypeScript，但是由于是移動端，antd-mobile的庫與TS有那么一些不兼容，官方文檔上也沒有像PC端那樣推薦你使用TS，踩過坑，于是換回了JS。

開發(fā)環(huán)境 create-react-app 目前最好用的開發(fā)React環(huán)境

UI組件庫的選擇：

Swiper.js 個人認為Swiper在對Vue的支持會更好，官方文檔上也沒有明確支持React

antd-mobile阿里旗下的庫，PC端的功能強大，但是更多使用場景是 TO-B ，這里只做嘗試使用，個人覺得TO-C項目不建議使用，本項目中也僅僅使用到了一點點這個組件庫的功能

圖標庫，Echarts Bizcharts G2 選擇了 Bizcharts ，因為它對React組件化支持更好。

開發(fā)所需的包

pubsub-js對state的管理的包

react-router-dom路由

antd-mobile官方推薦的按需加載配置

less-loader對less的支持

Node.js端

express框架(有考慮KOA2框架，但是鑒于express的成熟性沒有選擇)

puppeteer爬蟲獲取數(shù)據(jù)的包

ws模塊，webSocket的使用

request-promise-native，使用Node.js的服務器無跨域特性發(fā)送請求調用網(wǎng)易云音樂接口

版本控制工具，毫無疑問使用Git

包管理器，這里使用的是yarn，不是npm

技術選型對于后期迭代非常重要，個人建議大項目上TS和React。

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

基礎知識點

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

C3技術，canvas,Animation等制作一些動畫

對移動端的一些特殊情況，比如圓角過圓等的處理。

JSX語法，比較基本的JSX語法一定是要非常熟練的

ES5/6 TypeScript,為什么需要TS的知識？ 為了看懂源碼，更好調試代碼。

React知識點

React的事件機制，原生事件和合成事件的觸發(fā)哪個優(yōu)先級更高，事件代理，事件派發(fā)是什么過程？

setState的異步同步問題，其實就是上面的事件機制，這個問題遇到的還是非常多的，如果搞不懂，那么調試起來非常困難

React中追求組件化，個人喜歡組件化到極致，這樣方便調試，在使用TS和React配合時，調試真的非常簡單

prop-types限制傳入的props的類型（隱約有TS的影子）

高階函數(shù)的使用 React中對于大量的重復邏輯函數(shù)，使用函數(shù)柯里化給予默認參數(shù)和封裝成高階函數(shù)使用

高階組件也是用得非常多，對于一些重復邏輯的組件，我們可以封裝成高階組件，即傳入值是一個組件，返回的是一個新的組件。

React V16版本的Fiber架構，跟之前的區(qū)別？ 新版本的執(zhí)行render()時候，是分割成多個小任務，可取消中斷的過程，配合原生JS的requestAnimationFrame（高優(yōu)先級別的任務處理）和requestIdleCallback(低優(yōu)先級別的任務處理),達到性能優(yōu)化的目的。

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

Tree diff是優(yōu)先對比兩棵樹的同級別DOM節(jié)點，所以盡量不要將DOM節(jié)點徹底刪除，否則會讓React的render()時間變長，具體在操作樣式時候這點會非常明顯，需要將一個元素隱藏時候如果display:none，如果切換顯示和隱藏特別頻繁，那么會出現(xiàn)閃屏。

Component diff是對組件的diff，其實我們可以通過shouldComponentUpdate的生命周期函數(shù)返回值控制組件是否重新渲染，它的兩個參數(shù)是(nextProps,subState),返回值是ture則重新渲染組件，反之NO。

element diff，為什么在React中需要元素要有一個唯一的key值，因為底層的diff算法是四根指針，例如遍歷兩個元素 old element: A,C,B,D ； new element B,C,A,D 。 如果沒有唯一的key值，那么diff算法生成新的虛擬DOM節(jié)點過程是：發(fā)現(xiàn)第一個不一樣，那么直接插入B,C,A,D ; 但是如果有唯一的key值，那么React的diff算法會發(fā)現(xiàn)，里面有一樣的元素，那么：插入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的區(qū)別,處理一些復雜邏輯會用到

在對制作SPA單頁面應用時，頻繁切換的一些元素，做性能優(yōu)化處理，利用上面提到的那些React知識點，不然很可能出現(xiàn)閃屏，用戶體驗感差。

在http通信時，如果要將返回的數(shù)據(jù)setState，那么請注意setState的同異步場景，準確把控渲染和設置狀態(tài)時間差邏輯，特別是多個請求，可以使用`promise.all 或者在setState的回調函數(shù)中發(fā)送請求，定時器把控時間。

比如下面這段代碼，需要發(fā)送10個請求并且將返回的數(shù)據(jù)整合，再把數(shù)組中的10個promise對象的值取出，設置成狀態(tài)重新渲染。

`首先在生命周期函數(shù)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函數(shù)后會先調用reqMvList函數(shù)，拿到結果`
    createSrc=() => {
        const result=this.reqMvList()
        let arr=[]
        result.forEach(item => {
            item.then(res => {
                arr=[res, ...arr]
                return res
            })
        })
        `上面將得到的10個promise對象中的值全部取出放到數(shù)組中`
        setTimeout(() => {
            this.setState({
                src:arr
            })
        }, 1000);
    }
        `如果此時不加定時器，那么會先執(zhí)行setState的代碼，再去執(zhí)行promise.then里面的邏輯，
        那么其實狀態(tài)已經(jīng)更新完了，但是數(shù)據(jù)是后面添加到arr中的，所以會出現(xiàn)狀態(tài)里面沒有值的情況，
        這里需要加一個定時器解決。`

http的ajax輪詢 長輪詢 keep-alive 和webSocket的區(qū)別

如何將一個元素從頁面上隱藏 根據(jù)場景需求，配合React的Fiber和diff算法機制使用

高階函數(shù)，高階組件，函數(shù)柯里化的使用

如何在一個請求回來數(shù)據(jù)并且在設置狀態(tài)成功后發(fā)送下面的請求（優(yōu)雅發(fā)送請求，平鋪數(shù)據(jù)）？

手寫一個promise

promise.all的使用

pubsub-js的使用

React的三大屬性

對于高階組件中的修飾器的使用，例如@withRouter

cookie和cors如何配合使用？ cookie可以跨域嗎？

requestAnimationFrame和requestIdleCallback的區(qū)別，在React的Fiber中

Node.js端對request-promise-native的使用

現(xiàn)在的性能優(yōu)化真的只看 DOMContentLoad和Load的時間嗎？ 可以從RASI四個方面去看待。

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