這篇來說明 React 實用的概念-高階元件(higher order component)
所謂的 higher order，其實在 js 中也有類似的概念，叫做 higher order function
依序做個簡單的說明

higher-order-function

將一個或多個 function 作為參數傳入，得到回傳值為另一個新的 function

js 中常見的 higher-order-function

• forEach()
• map()
• reduce()
• filter()

關於 HOC

• 並沒有改變原本傳入的 component，而是建立新的 component
• HOC 單純就只是個 function，回傳一個新的 component
• 讓開發程式更模組化並重複使用邏輯

使用 higher order component 的目的

• 在不同 component 中使用類似的 function
• 將原本的 component 轉換為另一種 component
• 重複使用 react component 內的邏輯

為什麼不用 提升 state

因為實務上 component 會散落在 component tree 內，這種情況便不適合提升 state 到共同 ancester component

適合使用提升 state 的情況
component 有共同的 ancester component

pattern of HOC

HOC 的型態:

函式傳入原始的 component 作為參數，回傳新的 component

A pattern where a function takes a component as an argument and returns a new component

const NewComponent = higherOrderComponent(OriginalComponent);

HOC 例子

import React from 'react';

// 傳入原始的 component
const higherOrderComponent = (OriginalComponent) => {
    class HOC extends React.Component{
        render(){
            return(<OriginalComponent />)
        }
    }
    return HOC; // 回傳新的 component
}

HOC 可用 with__ 為開頭命名

HOC 常見的第三方 library 使用情景

HOC 常常搭配第三方 library 做使用，常見的如下

補充資料

https://www.smashingmagazine.com/2020/06/higher-order-components-react/
https://zh-hant.reactjs.org/docs/higher-order-components.html