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

語言選擇：

JavaScript

TypeScript

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

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

UI組件庫的選擇：

Swiper.js 個(gè)人認(rèn)為Swiper在對(duì)Vue的支持會(huì)更好，官方文檔上也沒有明確支持React

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

圖標(biāo)庫，Echarts Bizcharts G2 選擇了 Bizcharts ，因?yàn)樗鼘?duì)React組件化支持更好。

開發(fā)所需的包

pubsub-js對(duì)state的管理的包

react-router-dom路由

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

less-loader對(duì)less的支持

Node.js端

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

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

ws模塊，webSocket的使用

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

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

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

技術(shù)選型對(duì)于后期迭代非常重要，個(gè)人建議大項(xiàng)目上TS和React。

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

基礎(chǔ)知識(shí)點(diǎn)

主打音樂類APP,需要使用到的H5標(biāo)簽，等

C3技術(shù)，canvas,Animation等制作一些動(dòng)畫

對(duì)移動(dòng)端的一些特殊情況，比如圓角過圓等的處理。

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

ES5/6 TypeScript,為什么需要TS的知識(shí)？ 為了看懂源碼，更好調(diào)試代碼。

React知識(shí)點(diǎn)

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

setState的異步同步問題，其實(shí)就是上面的事件機(jī)制，這個(gè)問題遇到的還是非常多的，如果搞不懂，那么調(diào)試起來非常困難

React中追求組件化，個(gè)人喜歡組件化到極致，這樣方便調(diào)試，在使用TS和React配合時(shí)，調(diào)試真的非常簡單

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

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

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

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

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

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

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

element diff，為什么在React中需要元素要有一個(gè)唯一的key值，因?yàn)榈讓拥?b>diff算法是四根指針，例如遍歷兩個(gè)元素 old element: A,C,B,D ； new element B,C,A,D 。 如果沒有唯一的key值，那么diff算法生成新的虛擬DOM節(jié)點(diǎn)過程是：發(fā)現(xiàn)第一個(gè)不一樣，那么直接插入B,C,A,D ; 但是如果有唯一的key值，那么React的diff算法會(huì)發(fā)現(xiàn)，里面有一樣的元素，那么：插入B，C不動(dòng)，插入A，D不動(dòng)。 所以唯一的key值多重要？

滑動(dòng)時(shí)頁面警告

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

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

事件點(diǎn)擊穿透，禁止一個(gè)事件的默認(rèn)行為，對(duì)其手指抬起事件綁定邏輯。

antd-mobile的按需加載需要配置更多，圖標(biāo)和功能也更少。

touches targettouches changedtouches的區(qū)別,處理一些復(fù)雜邏輯會(huì)用到

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

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

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

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

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

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

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

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

手寫一個(gè)promise

promise.all的使用

pubsub-js的使用

React的三大屬性

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

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

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

Node.js端對(duì)request-promise-native的使用

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

由于太晚了，面試題的答案會(huì)放出來。喜歡的朋友請(qǐng)收藏，謝謝。 感謝@xpromise的技術(shù)支持