Higher-Order Component(HOC)
指的是在 React 中能夠幫助我們重複使用程式碼的 React Component。

// 官網中的範例
const EnhancedComponent = higherOrderComponent(WrappedComponent);

• 被當作參數放入的 Component 稱作 Wrapped Component (ChildComponent)，因為它是被 HOC 包住的。
• Higher-Order Component 又稱作 Enhanced Component 或 Composed Component，但它其實是 Function。
  Wrapped Component 將 props 轉換為 UI，而高階組件將此組件轉換為另一個組件(Enhanced Component)。

這邊使用的範例是 React.memo
他就是一個 HOC，也是我還在不認識 HOC 是啥時 就已經使用過的一個例子（疑？偷用繞口令加字數ＸＤ

範例

function Menu() {
  console.log('memo component');
  return <h3 style={{ color: "pink" }}>挖洗 nMenu 啦</h3>;
}

// 加上 memo
export default React.memo(Menu);

被 React.memo 包住的 component ，在父層重新渲染時他會被記憶住，所以 React 將跳過渲染這個子組件，且使用上次渲染的結果。 React.memo 通過記憶結果來提高性能。

被 memo 住的 component 會去比較父層傳入的 props 前後變化，若是在父層 re-render 時，傳入的 props 前後值進行淺比較結果並無改變時，component 就不會重新渲染。但他本身內部 state 有變化時，這個被 memo 住的 component 依然會重新渲染。