# code review/問題彙整
###### tags: `React`
---12.30 原版的問題 用於發想新的新人訓
1. Prop 和 State 的差異
正解為 Prop 是外部傳入的參數, State 為內部私有變數
2. React 有哪些生命週期
Mounting, Updating, UnMounting
3. 什麼狀況會觸發 Updating
Prop State 被變更的時候
4. Class Component 有哪些生命週期函數, 分別是做什麼的
至少要回答 Constructor, Render, ComponentDidMount, ComponentDidUpdate
5. 哪些生命週期函數不能 SetState
Constructor 不行, 因為這時是初始化 State
Render 不行 因為會無限迴圈
ComponentDidMount 可以, 官方也推薦在這裡 call API 並 SetState
ComponentDidUpdate 可以, 但需要終止條件, 否則會無限迴圈 (連結第二題)
(render設限制條件可以setstate嗎)
---
by jessica 搭配題目
1. function 用bind / arror function，問為什麼這麼做? (**js this問題**)


箭頭函式: 在宣告它的地方的 this 是什麼，它的 this 就是什麼
`handleClick = () => {
console.log(this);
}`
`<button type="button" onClick={(e) => this.handleClick(e)}>`

---
2. onchange 為甚麼要用object.assign
(甚至要用JSON.parse(JSON.stringify(family))進行深層複製)

* React官方建议把State当做是不可变对象，State中包含的所有状态都应该是不可变对象，当State中的某个状态发生变化，我们应该重新创建这个状态对象，而不是直接修改原来的状态。
code review: "對 React 來說，每個 State 都要是一個新物件比較好。
原因是 State 內每次都是新物件，渲染才會被更新。如果只是更改內容 但是物件不是新的，React 有時候會認知不到下面的內容有更新，變成你內容更新了 但是畫面沒有變。"

---
3. 如何由子組件傳送state給父組件?(連結分頁及LabelInput component)
父組件給子組件的屬性中放入一個function，讓該子組件回傳值。
缺點是要注意該方法要記得調用(人工控管而非自動執行)

---
4. this.setState((updater)=>({state:state}))
改成this.setState({state:state})
會怎樣?->(舉例第二題)這題不會怎樣
差別是?

> 使用this.setState(updater)時，()
> setState的參數接收的是一個callback function:(state,prop)=>{}，
> 他會先確保接收到了當前最新的state，才針對該state進行更新
>
> 若使用的是this.setState({})，**由於setState是非同步的**，
> 可能取得的state並非所預期的(累加/減可能沒反應)

---
5. 列表與key (參考card.js)
為什麼要key?
render時若無使用者自訂的key值，則依照同層級中定義的順序當key值。
key設idx的問題?


---
6. 為什麼一定要寫 super(props) ?
直到呼叫super()後，才能在建構子中使用 this
為什麼->我不會解釋，正在想說法...

---
---
6. Class Component 和 Function Component 差在哪裡
Function Component + Hook 和 Class Component 等價
可以互相取代
7. Hook (State Hook, Effect Hook) 如何使用, 有何優缺點
Hook 可解決邏輯被生命週期函數切開的問題
Effect Hook 可以解決 Component 不斷更新的效能問題
8. Redux 是做什麼用的
不同階層的 Component 的共用 State
用來解決上下 Component 傳值太複雜的問題
9. 九宮格程式中, 哪些 Component 能使用 Redux
除了 Square 以外全部
10. 如何讓 Parent Component 拿到 Child Component 的 State 值
透過 Prop 傳入 CallBack Function, 但觸發的時機點會改變
---
Q:不可使用setState的地方
* render()
render() function 應該是 pure 的，這表示：它並不會改變 component 的 state，它在每次呼叫時都會回傳同樣的結果，它並不會直接和瀏覽器有所互動。**呼叫setState會進入一個無限迴圈**
* constructor()
constructor 中要使用 state **只能使用this.state**

* componentDidUpdate()
可以馬上在 componentDidUpdate() 內呼叫 setState()，
但注意這必須要**被包圍在一個條件語句**內，否則會進入一個無限迴圈。

* componentWillUnmount()
不應該在 componentWillUnmount() 內呼叫 setState()
因為這個 component **永遠不會再重新 render**。

---
Q : 為什麼是在 ComponentDidMount 裡面呼叫 API?不在 Constructor 的原因是?
只有掛載時會呼叫Constructor，之後的更新都不會經過他。且在這個階段呼叫api才能確保渲染動作皆已完成，可再進行下一步的更新
> --> 當初的答案。但這樣說感覺其實不太對?

---

* React官方建议把State当做是不可变对象，State中包含的所有状态都应该是不可变对象，当State中的某个状态发生变化，我们应该重新创建这个状态对象，而不是直接修改原来的状态。
code review: "對 React 來說，每個 State 都要是一個新物件比較好。
原因是 State 內每次都是新物件，渲染才會被更新。如果只是更改內容 但是物件不是新的，React 有時候會認知不到下面的內容有更新，變成你內容更新了 但是畫面沒有變。"

---
* setState(updater, callback)
updater : (state, props) => stateChange

callback/ 使用componentDidUpdate

請把 setState() 想成一個請求而非一個馬上對 component 進行更新的指令。為了達到更好的效能，React 也許會延遲這個請求，然後一次更新數個 component。React 並不保證 state 的改變會馬上發生。
被 updater function 所接受的 state 和 props 兩者都保證一定會被更新到最新的狀態。

------------
Q : react的優缺
組件化-> 優點code reuse,多人開發時維護性反而不一定較佳

------------
Q : 如何由子組件傳送state給父組件?
父組件給子組件的屬性中放入一個function，讓該子組件回傳值。
缺點是要注意該方法要記得調用(人工控管而非自動執行)

------------
Q : redux的優缺

封裝/集中控管差異:
封裝完成後在外部的使用者僅需呼叫即可(知道需傳入什麼，會得到什麼結果即可。不需去管內部實作邏輯。)
集中控管則在多人共同開發時容易很混亂。(須了解其內部都放了甚麼、做了什麼)。所以只用來存較基礎的東西。

Q : function/class component的差異與優缺
差異- function原來沒有生命週期及state
但以hooks就可以達到與class component相同的效果

Q : hooks的好處
程式邏輯不會被生命週期給切開(不懂甚麼意思)

------------------------
https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data
> 上次在寫時遇上了componentdidupdate中的prevState一直抓不到前一個state(都一直與當前state相等)，還沒解決此問題。
該問題是發生於子組件內，前輩建議我去了解react render的機制