深圳某某某跨境電子商務前端開發面試

面試時間： 2020年12月10日下午3點-5點
面試形式： 技術面+專案面+HR面

技術面

1. 自我介紹
   參考模板：
   你好，我是XX，畢業於XX大學。現就職於XX公司，有X年開發經驗，公司主要使用技術棧為React+AntDesign+Redux進行開發

2. react-router型別及區別？

區別	HashRouter	BrowserRouter
原理	路徑中包含了#，相當於HTML的錨點定位	使用的是HTML5的新特性History，沒有HashRouter(錨點定位)那樣通用，低版本瀏覽器可能不支援
用法	元件跳轉時不能傳遞引數(除非手動拼接URL字串)，因此一般配合Redux使用，實現元件間的資料通訊。	元件跳轉時可以傳遞任意引數實現元件間的通訊
生產實踐		如果後端沒有覆蓋到路由就會產生404錯誤，解決：加入中介軟體，放在伺服器端路由匹配的最後，如果前面的API介面都不匹配，則返回index.html頁面。

3. react生命週期
   目前公司專案使用的react版本生命週期：
   掛載階段：
   componentWillMount
   componentDidMount： 元件渲染之後呼叫，只呼叫一次；傳送ajax請求獲取資料在此，原因：在 componentWillMount 裡進行網路請求會阻礙元件的渲染；componentWillMount 呼叫 setState 不會出發重新渲染；componentDidmount 是在元件完全掛載後才會執行，在此方法中呼叫setState 會觸發重新渲染，最重要的是，這是官方推薦的！
   更新階段：
   componentWillReceiveProps：元件接受新的props時呼叫
   shouldComponentUpdate： react效能優化重要一環；元件接受新state或者新props呼叫；再次比較前後兩個state和props是否相同，如果相同，則返回false阻止更新
   componentWillUpdate
   componentDidUpdate
   銷燬階段
   componentWillUnmount：事件監聽和定時器需要在此清除
   有了解到react升級後的宣告週期：
   去掉了 componentWillMount
   去掉了 componentWillReceiveProps 使用getDerivedStateFromProps
   去掉了 componentWillUpdate 使用getSnapShotbeforeUpdate

4. react元件間通訊
   父元件向子元件通訊：父元件向子元件傳遞props，子元件得到props後進行相應的處理
   子元件向父元件通訊：利用回撥函式：父元件將一個函式作為props傳遞給子元件，子元件呼叫該回撥函式
   跨級元件之間通訊：中間元件層層傳遞props；使用context物件：上級元件宣告自己支援context，並提供一個函式來返回一個context物件；子元件需要宣告自己需要使用context
   非巢狀元件間通訊：利用二者共同父元件context進行通訊；使用自定義事件方式：典型的釋出/訂閱模式，通過向事件物件上新增監聽器和觸發事件來實現元件通訊
   狀態管理工具 Redux

5. 元件封裝注意事項（抽離元件注意事項）
   可擴充套件性強：如果不能擴充，失去程式碼的靈活性
   文件詳細清楚：適當的註釋
   顆粒度合適，適度抽象：儘量保證一個元件完成的功能是單一的，不是多個功能的結合體
   留一個slot：元件完成80%功能，剩餘20%讓父元件通過slot完成
   異常處理：可疑區增加try catch；全域性監控js異常window.onerror；React的componentDidCatch

6. react-router裡的Link標籤和a標籤有什麼區別
   Link標籤是react-router裡實現路由跳轉的連結，一般配合Route使用，react-router接下了其預設的連結跳轉行為，區別於傳統的頁面跳轉，Link標籤的"跳轉"行為只會觸發相匹配的Route對應的頁面內容更新，而不會重新整理整個頁面
   Link標籤做的三件事情：
   • 1.有onclick那就執行onclick
   • 2.click的時候阻止a標籤預設事件
   • 3.根據跳轉href(即使是to)，用history(web前端路由兩種方式之一，history&hash)跳轉，此時只是連結變了，並沒有重新整理頁面
   而標籤就是普通的超連結了，用於從當前頁面跳轉到href指向的裡一個頁面(非錨點情況)

7. 講下webpack
   描述了專案中webpack的配置和每項的作用

const path = require('path');  //引入node的path模組
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //將html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')  // 分離樣式檔案，CSS 提取為獨立檔案，支援按需載入   //打包的css拆分,將一部分抽離出來  //提取 Chunk 中的 CSS 程式碼到單獨檔案
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/index.js', //入口檔案
    output: { //webpack如何輸出
        path: path.resolve(_dirname, 'dist'),//定位，輸出檔案的目標路徑
        filename: '[name].[chunkhash:8].js' //設定 output 的 filename，用 chunkhash: 和 Webpack 打包的 chunk 有關，不同的 entry 會生出不同的 chunkhash
    },
    module: {//模組的相關配置
        rules:[ //根據檔案的字尾提供一個loader，解析規則:型別為陣列，每一項都是一個object，內部包含test（正則：型別檔案；loader, options:引數等屬性 ）；本質是一個函式，在該函式中對接受到的內容進行轉換，返回轉換後的結果。loader即翻譯官，對其他除js型別的資源進行轉譯的預處理工作
            {
                text: /\.js$/, //正則：型別檔案 es6=>es5
                includes:[
                    path.resolve(_dirname, 'src')
                ],
                exclude:[], //不匹配選項，優先順序高於test和include
                use: 'babel-loader'//es6=>es5
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use:['css-loader', 'less-loader'] //載入CSS，支援模組化，壓縮，檔案匯入等特性
                })
            },
            { //圖片loader
                test: /\.(png|jpg|gif)$/,
                use:[
                    {
                        loader: 'file-loader'//根據檔案地址載入檔案，把檔案輸入到一個資料夾中，在程式碼中通過相對url去引用輸出的檔案（處理圖片和文字）；設定file-loader的name，使用hash；和整個專案的構建相關，只要專案檔案有修改，整個專案的hash值就會改變
                    }
                ]
            }
        ]
    },
    resolve:{ //解析模組的可選項
        modules: [], //模組的查詢目錄，配置其他的css等檔案
        extensions: ['.js', '.json', '.jsx', '.less', '.css'],//用到檔案的擴充名，儘可能減少字尾嘗試的可能性
        alias:{//模組別名列表，合理使用alias可縮小打包作用域
            utils: path.resolve(_dirname, 'src/utils')
        }
    },
    plugins:[//插進的引用，壓縮，分離美化，型別為陣列，每一項都是plagin的例項，引數通過建構函式傳入：外掛，擴充套件webpak的功能，在webpakck生命週期會有很多事件，plugin可以監聽這些事件，通過webpak提供的api改變輸入結果
        new ExtractTextPlugin('[name].css'), //[name]預設 也可以自定義name 宣告使用；分離樣式檔案，css提取為獨立檔案，支援按需載入；設定MiniCssExtractPlugin 的filename，使用contenthash：根據檔案內容來定義hash，檔案內容不變，則contenthash不變
        new HtmlWebpackPlugin({//將模板的頭部和尾部新增CSS 和js模板，dist目錄釋出到伺服器上，專案包，可以直接上線；簡化html檔案建立
            file: 'index.html',//打造單頁面運用，最後執行的不是這個
            template: 'src/index.html' //腳手架放在根目錄下
        }),
        new CopyWebpackPlugin([//src下其他的檔案直接賦值到dist目錄下
            {form:'src/assert/favicon.oci', to: 'favicon.ico'}
        ]),
        new webpack.ProvidePlugin({ //引用框架jquery lodash工具庫是很多元件會複用 省去了import
            '_': 'lodash'//引用webpack
        })
    ]
}

8. GIT分支管理
   一 主分支master
   程式碼庫應該有一個，且僅有一個主分支。所有提供給使用者使用的正式版本，都在這個主分支上釋出
   git主分支的名字，預設叫做master，他是自動建立的，版本庫初始化以後，預設就是在主分支進行開發
   二 開發分支develop
   主分支只用來發布重大版本，日常開發應該在另一個分支上完成。我們把開發用的分支，叫做develop。
   這個分支可以用來生成程式碼的最新隔夜版本。如果想正式對外發布，就在master分支上，對develop分支進行合併merge
   git建立develop分支的命令：git checkout -b develop master
   將develop分支釋出到master分支的命令：
   git checkout master //切換到master分支
   git merge --no-ff develop // 將develop分支進行合併
   三 臨時性分支（使用完以後，應該刪除）
   用來對應一些特定目的的版本開發。
   主要三種: 功能分支feature；預釋出分支release；補休bug分支fixbug分支；
   正常開發流程：
   從develop分支切出一個新分支，根據是功能還是bug，命名為feature-和fixbug-；
   開發著完成開發，提交分支到遠端倉庫；
   開發者發起merge請求，將新分支請求merge到develop分支；
   接受merge請求，新分支請求merge到develop分支，同時刪除請求分支；
   轉測時，直接從當前develop分支merge到pre-release分支，重新構建測試環境完成轉測；
   測試完成後，從pre-release分支merge到master分支，基於master分支，構建生產環境完成上線

9. 公司react webpack 專案版本

10. 平時怎麼學習的
    多做練習，多寫程式碼，從錯誤中學習
    多思考，多總結
    多和其他人溝通思想和知識點

11. 你還有什麼要問我的嗎？
    現在公司具體專案有哪些？

專案面

1. 自我介紹
   參考模板：
   你好，我是XX，畢業於XX大學。現就職於XX公司，有X年開發經驗，公司主要使用技術棧為React+AntDesign+Redux進行開發

2. 公司開發流程
   前端專案的方案設計及初期評審
   定義專案前後端介面協議，協調後端評審並輸出介面文件
   根據UI設計稿完成頁面開發，實現頁面互動
   對接後端介面，協同後端完成介面聯調及前端自測
   配合測試優化功能及互動，實現專案釋出上線

3. 覺得自己適合單打獨鬥寫專案，還是做專案負責人，還是技術管理者

HR面

1. 住在哪裡
2. 專案中遇到困難
3. 專案中比較難的部分
4. 專案中做的比較好的
5. 之前薪資，期望薪資
6. 為什麼離職
7. 工資結構
8. 優點是什麼？舉例說明
9. 平時加班多嗎
10. 平時上班時間