Higher - Order Components：其實就是一個函式，傳給它一個元件，它返回一個新的元件

形如：

1 const NewComponent = HOC(YourComponent)

• 高階元件是強化元件的一種方式，一般是具備複用的，如果只是某個元件需要強化，則沒有必要寫成高階元件的形式
• HOC實現步驟
  • 建立一個函式
  • 指定函式引數，引數應該以大寫字母開頭
  • 在函式內部建立一個類元件，提供複用的狀態（如有）及邏輯程式碼，並返回
  • 在該元件中，渲染引數元件，同時將狀態通過props傳遞給引數元件（可選，如有）
  • 呼叫該高階元件，傳入要增強的元件，通過返回值拿到增強後的元件，並將其渲染到頁面

例如：自動注入一個版權資訊

 1 // src/Hoc/Hoc_copyright.jsx
 2 // Fragment是一個偽標籤，渲染的時候是不會顯示在頁面中的，因此也不會影響樣式，可以寫key屬性
 3 import React, { Component, Fragment } from "react";
 4 
 5 const withCopyright = (Cmp) => {
 6   return class Hoc extends Component {
 7     render() {
 8       return (
 9         <Fragment>
10
 
           <Cmp></Cmp>
11           <div>&copy; 2020 開始發行</div>
12         </Fragment>
13       );
14     }
15   };x
16 };
17 export default withCopyright;

使用方式

 1 import React, { Component } from "react";
 2 // 引入HOC
 3 import Hoc from './Hoc/Hoc_copyright'
 4 
 5 class App extends Component {
 
 6   render() {
 7     return (
 8       <div>
 9         <h1>網站首頁</h1>
10       </div>
11     );
12   }
13 }
14 // 使用HOC
15 export default Hoc(App);