高階組件 (HOC) 全名Higher Order Component ,本身並不是React API 的一部分，HOC指的是在 React 中能夠幫助我們重複使用程式碼的 Component ，你可以把它看成是一個function，而這個function可以把component傳入，並回傳一個更強的組件。
**當作參數放入的 Component 稱作 Wrapped Component **
const EnhancedComponent = higherOrderComponent(WrappedComponent);
常見的使用的方式有第三方的react redux中的connect()。

如何撰寫HOC?

1. 將想寫的程式碼寫成component
2. 創建HOC檔案
3. 把想要重複使用的component丟進HOC檔裡面
4. 用this.props 把所有原本的 props 內容帶回到 ChildComponent 中

import React from 'react';

const higherOrderComponent = (ChildComponent) => {
  class ComposedComponent extends React.Component {
    render() {

      return <ChildComponent {...this.props} />;
    }
  }

  return ComposedComponent;
};

export default higherOrderComponent;

套用此 HOC 的元件載入，並且要把他export出來

 import HocComponent from '@/component/HocComponent';
 class ＷrappedComponent {
   // ...
   render() { ... }
 }
 
 export default HocComponent(ＷrappedComponent);

顯示名稱
我們在編輯城市的時候為了便於調試，請選擇一個顯示名稱來表明它是 HOC 的結果，這時候就需要顯示出組件的名稱，如果你的HOC是withSubscription，包裝組件為CommentList，取名的方式就要為WithSubscription(CommentList)。

該注意的事項:

• 不能在render中使用HOC:
  因為若他們使用的不是同一個組件，昨天介紹過的diffing演算法就會把他雖毀並且重建，這會造成嚴重的後果，重新安裝一個會導致那個組件及他的子組件的狀態全部丟失。
  注意:refs 不會被當作 props 傳入

靜態方法必須被複製
當您將 HOC 應用於組件時，你需要重複利用的組件會被包覆著，就代表著新組件沒有原本的組件，所以為了解決這個問題，必須在return之前複製到你的容器中。
可以使用hoist-non-react-statics方法，他可以自動複製所有的靜態方法

import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;

參考文章:
https://pjchender.dev/react/react-higher-order-component/
https://zh-hant.reactjs.org/docs/higher-order-components.html