# Botboinnie 面試 2021/03/23

###### tags: `面試經驗`、`前端`

Cofounder 來面試

問題：
1. React 比原生JS多得好處:
資料驅動畫面
**Vitaul Dom** => 優化效能 =>大專案渲染時，不用一次渲染所有DOM
:::
React build a virtual dom(and event system)
Optimized for performance and memory footprint
- React builds a new virtual DOM sub tree
- ...diffs it with the old one
- ...computes the minimal set of DOM mutations and puts them in a queue
- ...and batch executes all update
:::
SPA router => smooth
2. 介紹作品 印象深刻、最難的功能
被問104 issue 為何不 loading Accordion就好，我答資料來自reducer，reducer要等資料處理好才會給各個component，他問該怎處理這隻很肥得reducer，或說單一職責則，把file模組化分工作細ㄧ點，不要為了共用function，就全部功能寫在同一隻function [<issue link>](https://hackmd.io/ZNlt329gSNi3yVL4kybEmg#104)

3. Q1.React Life Cycle 畫圖給他看
說明每個功能跟使用機制與用到的地方
Ex: Didmount & **DidUpdate** 都Call同一隻Api，用prevState與PrevProps要處理什麼誤題
Ex: **shouldUpdate** & **PureCompoennt 實作** Object.keys比較props若 **porps的物件很深**該怎辦？

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

4. 為什麼要用redux
防止 Prop Drilling
state lift 不是最佳方法
props傳太多會有每個component有...otherProps的出現，容易造成**rerender**

5. 說明 **Promise.all 特性**
陣列裡面若有一個promise失敗，其他都會失敗
我好想還有一些沒講到？要自己查

6. 請寫出**sequential**的方式call api，假設目前server一次只能call一隻api，你有100隻

> sequential 就是仗順序 call api的意思，第一筆call回傳，才能call第二筆

const laws = [1, ...100];
const fetchLaw = (lawId) => {
    ...HTTP..fetch..axios..等
    return Promise.resolve(lawInfo) => {
        // ... 請補上遺失的ｃｏｄｅ
    }
}

我的思路：for loop / while / recursive

laws.forEach((id) =>{
    await fetchLaw(id);
    return data
})

延伸，不用await用then怎實作(**promise chain?**)

建議：
1.不要文件看過、功能實作完就好了，要知道為何這樣做，還有其他做法嗎？抱持懷疑的態度
Ex: immtable issue

**為什麼不能用push**，不要只回答因為要immutable，要回答預期會發生什麼錯?
因為不希望污染到原本給我們的值，若其他地方用到這個值，那就一起動到了

const users = [xxx];
ADD_USER:
return [...users, action.user]

v.s

const users = [xxx];
ADD_USER:
users.push(action.user)
return users

2.練習白板題，不要依賴console.log跟複製，想好思路在寫扣

3.做再多小專案，你的code也不會變強，思路仍一樣

p.s. cofounder 幫我付咖啡錢、cofounder以前寫前端，現在不寫code，前端2人、後端2人，因為feature做不完再徵人

p.s. 前端早期是Class component + CSS Module + redux，現在新功能是hook+styled-component，GitHub / 後端Node.js

p.s. 用白紙寫code真的會腦袋空白