高階元件（HOC, High-Order Component）是React中用於重組元件邏輯的高階技術，是一種程式設計模式而不是React的api。

直觀來講，高階元件是以某一元件作為引數返回一個新元件的函式。

高階函式

要了解高階元件，首先我們要了解下什麼是高階函式！

  特徵：

  1. 函式可以作為引數傳遞；

  2. 函式可以作為返回值被輸出；

高階元件目的與意義：減少重複

重複是優秀系統設計的大敵 --Robert C.Martin

在React中使用高階元件的方法：

  1. HOComponent(WrappedComponent, [args])

  2. @HOComponent // 裝飾器模式

高階元件的應用：

  1. 代理方式

   操作prop/抽取狀態/訪問ref/包裝元件

    示例： 

export default () => WrappedComponent => class A extends React.Component {
  render() {
    return <WrappedComponent {...this.props} />
  }
}

  2. 繼承方式

    操作prop/操作生命週期函式

    示例：

export default () => WrappedComponent => class A extends WrappedComponent {
  render() {
    return super.render()
  }
}

 注：優先考慮組合，其次考慮繼承