React / Redux Interview

Q: Presentational component V.S Container component
  • Presentational component 透過props接收資料,通常只關注UI的變化。
  • Container component 關注於如何訂閱應用程式的state,接收從store來的data flow
Presentational Component V.S Container Component

Ref: https://neighborhood999.github.io/2017/07/06/learning-hoc/


Q: Class component V.S Functional component
  • Class component 包含本身的狀態 (State) 及生命週期 (Lifecycle)
  • Functional component 僅接收 props,別稱為 Stateless component

Q: State V.S Props
  • Props is immutable. 為 component 外部變數
  • State 為 component 內部變數

Q: Higher-Order Components

將 component 包裝後再輸出一個 component 即為Hoc。通常會將 UI 及邏輯拆開,可將 UI 部分的重複使用,邏輯用Hoc方式分離。

HOC Pattern

Q: 在 constructor 內綁定 this,還有什麼方法?

宣告 function 時可用arrow function。


Q: render list 時,為何要 set key?

Key 能幫助 React 識別哪些 items 被改變或者移除。

不建議用 index 設置key,如果 list 重新排列,會導致 re-render 時變慢。


Q: refs 用法

React 提供的 API,可直接操作 DOM 元件。


Q: Controlled Component V.S Uncontrolled Component
  • Uncontrolled Component 基本上就跟 HTML 中 form 一樣,value 不受 state 控制,也沒有 callback 去監聽其 value 變動。
  • Controlled Component 則是使用 React 的 state 來儲存其value,並用 onChange(callback) 來監聽 form element 是否變動。由 React 來控制這些 form element 我們稱做 Controlled Component。
  • 結論:在 React 開發中,建議使用 Controlled Component 來開發,用以保持專案良好的維護。

Q: shouldComponentUpdate() 的使用情境

shouldComponentUpdate 可以手動判斷使否讓其 component re-render,可減少不必要的 render。

React 提供 PureComponent ,該 Component 會自動帶這個 lifecycle,在單純接收 props 的 component 可以採用。