2021屆秋招哈囉出行前端面經（一面）

面試過程

1. 簡單作個自我介紹吧。

• 面試官您好。。。

1. 看到了你的項目經驗，簡單介紹一下你的項目吧。

• 。。。

1. 你的項目中用到了 React，用的是那個版本呢？

• 用的 React 16.5（記錯了，應該是 16.8）

1. React 16.5 已經有 Hooks 了嗎？

• 沒有（場面一度十分尷尬，React 16.8.0 是第一個支持Hook 的版本）。

1. Hooks 和 class 有哪些優點？

• 有時 class 裏不用的生命週期函數中會出現相同的邏輯，使用 Hooks 使得代碼更易維護。

lucifer 注: hooks 帶來的優點一方面是賦予了函數式組件更多功能，使得其從功能上可徹底替代 class 組件。 另外一方面 hooks 創造了一種新的代碼組織方式，和之前的 mixin 以及 render props 的出發點是相似的，但其注重相同功能的代碼放到一塊兒，使得代碼邏輯複用多了一種選擇。固然這其中有利有弊，因爲篇幅限制，不在這裏展開。

1. 你用過 Hooks 的哪些方法？哪些函數？

• 用過 useEffect。

lucifer 注: 建議你們多講幾種，好比 useState, useCallback 等。

1. useEffect 有什麼特色？

• 使用 useEffect 能夠模擬一些生命週期函數，好比 componentDidMount，componentDidUpdate，componentWillUnmount。

1. react 的生命週期有哪些？

• 掛載時有 componentDidMount，更新的時候有 componentDidUpdate，shouldcomponentUpdate，卸載的時候有 componentWillUnmount 等。

1. componentWillReceiveProps() 你瞭解過嗎？

• 沒有了解過。後來查文檔說 componentWillReceiveProps() 不太經常使用。

1. 當 Redux 中的數據發生變化時，哪幾個生命週期會發生變化？或者解釋一下 Redux 的運行機制？

• 亂答了一通……答得很差。其中談到了 redux 主要用於複雜的數據流。

lucifer 注：推薦你們閱讀 深刻理解redux

1. 複雜的數據流是指什麼樣的？

• 給本身挖了個坑，沒太說明白，緣由在於不瞭解 Redux 的應用場景，即爲何要使用 Redux。這篇文章 講得挺好的，意思就是當咱們的狀態分佈在多個組件中，跟蹤這些組件的狀態變得繁瑣時，就可使用 Redux 來統一管理了。

1. webpack 平時作過哪些配置？

• 平時會設置 loader 和 plugin，用過插件 commonChunks 等。

1. plugin 和 loader 有什麼區別？

• loader 至關於一個模塊轉化器，好比將 less 文件轉化爲 css 文件，plugin 支持一些拓展的插件，好比 HTMLWebpackplugin，commonChunks 等。

1. loader 如何將 less 文件轉化爲 css 文件？

• 這裏沒搞清楚是問具體配置仍是問原理，結果面試官就換下一個話題了。

lucifer 注：其實就是 ast 的解析和轉化，具體內容你們能夠搜索下相關文章。

1. loader 的執行順序是什麼樣的？

• 從右往左、從下往上。

lucifer 注：沒看到從下到上什麼意思。 不過 loader 的執行順序是借鑑了 compose，函數式編程中的 compose 的結合順序就是從右向左，而功能相似的 pipe 則是從左到右，你們常見的 linux 管道（pipe）就是從左到右。

1. 我想配置一個單頁應用，如何配置 entry 部分？

entry: {
// 這裏寫什麼
}

1. ES6 瞭解嗎？let, const, Map, Set, 箭頭函數等等。
2. 下面的代碼 b 等於什麼？

let a = [1, 2, 4]
let b = a.map(v => { v= v*2 })

我先回答了 b = [1, 4, 8]（腦子抽了，小學數學都算錯），面試官問爲何不是 [2, 4, 8]，我說說錯了😂

而後又說這樣不對，由於箭頭右邊有個大括號。

其實上面代碼中 b 是 [undefined, undefined, undefined]，面試官引導該怎麼處理才能使 b 爲 [2, 4, 8]。

答案就是若是箭頭右邊是打括號，須要在大括號內加一個 return 返回就好了。即下面的代碼：

let a = [1, 2, 4]
let b = a.map(v => { v= v*2; return v; })

平時寫 map 一直都沒用過大括號，面試的時候才明白，我炸了！

1. 瞭解事件循環嗎？

lucifer 注：推薦閱讀我以前寫的 《一文看懂瀏覽器事件循環》

1. 有什麼問題？

具體工做地點看本身安排。杭州和上海。杭州主要負責算法平臺的搭建和地圖相關。技術棧是 React。

感覺

面試官很和善，因爲堵車來的較晚，還表示很差意思，面試時的感受本身較長時間沒有面試水平下滑，菜得一批，map 中若是是大括號應該加上 return 都不知道，糾結了半天。整體仍是根據簡從來提問的，因此一個好的項目相當重要，項目不在於多麼宏大，而是本身真正獨立作了哪些部分，有收穫纔是最重要的。

lucifer 總結

因爲是秋招，整體面試難度偏低。多是一面的緣由，就連編程和算法題也沒有。面試中的大多數問題都是常見的問題，中規中矩。你們查缺補漏便可。以後會給你們帶來更多面經。

你們也能夠關注個人公衆號《腦洞前端》獲取更多更新鮮的前端硬核文章，帶你認識你不知道的前端。