前言
近年前端技術層出不窮，React 也是程序員間討論最多的 Javascript 框架之一。借這個機會開始學習 React，並把筆記作為 React 基礎教程系列（參考 React 官網）。
因為屬於入門，不太適合對 React 有經驗的同學，但希望到此的同學多少都有所收穫。
什麼是高階組件
高階組件是參數為組件，返回值為新組件的函數。
這不是 React 特有的，平時我們一定接觸過高階函數，高階組件無非就是返回一個組件式的函數，這點是基於 React 組合特性，也是其特有的設計模式。
示意 React 高階組件
用法示例
問題場景
比如有個很簡單的 Info 組件，渲染出一個數字：
Info Component
調用 Info
但如果我們有一堆類似 Info 的組件，又碰巧所有的組件需要將 num 做個特殊處理，比如都 +1 。
很顯然，我們就要到這堆組件中，人為的做處理。
這種"硬代碼"寫多了，雖然解決了需求問題，但事後只會徒增一堆 bug、和工作量。
使用高階函數
所以利用高階組件技巧，可以將 Info 等組件進行裝飾，我們只要套同一層高階組件即可達到最終效果。
他是怎麼做的呢？
定義一個 hocFactory 工廠方法，其接受一個組件參數，並對於處理邏輯後，返回另一個組件函數：
高階組件函數 hocFactory
最後我們調用這個工廠方法，將其結果作為組件在 JSX 模板中當組件標籤使用：
調用高階組件
這樣我們就不用修改 Info 組件，直接使用 HocInfo 組件就能使得所有的 num 渲染結果統一處理。
最佳實踐
返回的組件上，只定義關鍵 props
精簡屬性參數，不要傳無用數據。
例如 HocInfo 組件，只為 Info 組件設置 num 屬性；額外的屬性只會降低高階組件的靈活性：
HOC 工廠方法的傳參的設計
類似 Koa 的 compose 方法，可以最大程度的設計 HOC 工廠方法的參數傳遞方式。
比如，React Reduc 的 connect 是一個返回高階組件的高階函數！
對 HOC 工廠方法設置一個名字
不要 return 一個匿名函數，這樣不利於 debugger 調試：
不要在 render 方法中使用 HOC
因為組件每次數據更新，最後都會觸發 render 來重新渲染，裡面涉及 React 的 diff 算法。
如果每次如下圖，重新對組件聲明，會造成性能等問題：
把靜態 static 方法也要移至到 HOC 組件內定義
避免靜態 static 方法在組件進行"加強"時丟失掉，需要移至組件內部：
Refs 不會被傳遞
因為 ref 不屬於 this.props 屬性，所以需要使用 React forwardRef 在子組件轉發來自父組件的 ref 引用。
作為高階組件，如果有 ref 的傳遞需要，則需要單獨進行設置：
總結
以上就是高階組件基本概念，通過高階組件將幫助我們提高組件單元的複用性，使我們組件之間更好的銜接。
為了更好的閱讀體驗，可以在文章底下的“瞭解更多”中查看原文。
閱讀更多 前端雨爸 的文章
