---
tags: react,
disqus: hackmd
---
{%hackmd theme-dark %}

###### tags: `react`

# React高階組件(HOC)

[高階組件(High Order Component)官方文檔](https://zh-hans.reactjs.org/docs/higher-order-components.html)

高階組件的命名，官網的做法是使用小寫開頭。

[胡子大哈](http://huziketang.mangojuice.top/books/react/lesson28)說高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。

這樣再回頭看官網的高階組件命名就可以理解它為什麼是小寫。

[[React] Higher Order Component 你是誰](https://hsien-w-wei.medium.com/react-higher-order-component-%E9%AB%98%E9%9A%8E%E7%B5%84%E4%BB%B6-4110c03043ba)

const NewComponent = higherOrderComponent(OldComponent)

來看一個簡單的範例

testHoc.js

import React from "react";

export default function testHoc(Component) {
  return class extends React.Component {
    componentDidMount() {
      console.log('嗨，我被掛載了唷');
    }
    render() {
      return <Component {...this.props} />;
    }
  }
}

MyTestComponent.js

import React from "react";
import {testHoc} from "./testHoc";

export class MyTestComponent extends React.Component {
    render() {
        return (
            <div>
                這是我想要顯示的內容!
            </div>
        );
    }
}

// 輸出結合了testHoc的MyTestComponent組件
export default testHoc(MyTestComponent);