tags: react

React高階組件(HOC)

高階組件(High Order Component)官方文檔

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

胡子大哈說高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。

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

[React] Higher Order Component 你是誰

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);