什麼是 High Order Component

發表於 
1
hoc :: ReactComponent -> ReactComponent

HOC(High Order Component)帶有點Function Programming概念
它本質上就是一個Function，傳入一個(或多個)React.Component，再回傳新的React.Component

HOC在做什麼

如果有接觸過Redux應該有聽過Presentational / Container Component
Container Component主要負責「怎麼做事情」
Presentational / Container Component
Tom Coleman提到一項Container Component很重要的職責
就是負責將Global State分派給底下的Child Component
而Redux中的connect()就是HOC的一種，通常我們都會用

  • mapStateToProps 將需要的state轉換成Presentational的props
  • mapDispatchToProps 注入需要的callback行為(ex. onClick、onHover時)
1
2
3
4
const mapStateToProps = (state, ownProps) => {
}
const mapDispatchToProps = (dispatch, ownProps) => {
}

當各個Container都負責整個Application的一塊，大家有各自的職責並做好本份就會讓整個架構很有效率

HOC為何特別

A recent trend in React is towards functional stateless components.
These simplest “pure” components only ever transform their props into HTML and call callback props on user interaction.

以上截自Tom Coleman文章中的一段話，可表達出為何要分出Presentational / Container
當將「複雜的活兒」交給特定的Container做，Presentational只管「顯示」&「拿取」，這樣碰上Bug時我們就知道該解決誰找誰來解決了

Component幾乎都需要存取Global State中的某一部分，但不能隨意地讓每個Component都可以調用，所以HOC形成了一種約束，由它來分配

而Container也取代了原生的mixins，可在網路上找到許多比較兩者的文章

結語

High Order Component的出現也間接表明React團隊往Functional Programming靠攏
Javascript也有些Library可幫我們的Code更Functional ex.Ramda.js
搞懂Functional Programming的思維，以現在來看是件值得投資的事

Reference

Understanding Higher Order Components
Presentational and Container Components
初識React中的High Order Component

0%