網頁

2021/7/25

React HOC Higher-Order Components簡單範例

React的High-Order Component簡稱HOC的簡單範例如下。


Higher-Order Component是一個函式,其接收Component為參數並回傳Component。官方定義如下:

A higher-order component is a function that takes a component and returns a new component.


例如下面的higherOrderComponent()即為一個HOC,其接收一個Component參數WrappedComponent並回傳了一個匿名的Component class,並在回傳的Component中使用<WrappedComponent>並在外包裝了Hello文字。 。

App.js

import React from 'react';
import './App.css';

function WrappedComponent(props) {
  return <span>{props.name}</span>
}

function higherOrderComponent(WrappedComponent, props) {
  return class extends React.Component { // return a Component class
    render() {
      return <h1>Hello, <WrappedComponent name={props.name}/>!</h1>
    }
  }
}

function App() {
  const EnhancedComponent = higherOrderComponent(WrappedComponent, {name: "John"})
  return <EnhancedComponent/>
}

export default App;

higherOrderComponent()接收的Component參數WrappedComponent是個class,回傳的Component也是個(匿名)class。所以HOC是一個函式,也是一個Component(class)。

JSX不能是表達式,因此先將higherOrderComponent()放入變數中,例如EnhancedComponent,再以JSX <EnhancedComponent/>的產生實例,render的html結果如下。

<h1>Hello, <span>John</span>!</h1>

不用JSX語法可透過React.createElement()建立higherOrderComponent()的實例。例如下面將上面範例App()中的<EnhancedComponent/>替換成React.createElement()的寫法。

function App() {
  return React.createElement(
    higherOrderComponent(WrappedComponent, {name: "John"}), null, null)
}

參考github


Higher-Order Component的概念和Higher Order Function很像,差別在於一個是接收及回傳Component,另一個是接收及回傳Function。

此外HOC是pure function,沒有side-effect(副作用),也就是不對傳入Component的狀態做異動,其僅是對Component做一層封裝而已。

HOC在概念上類似OOP的裝飾者模式,都是包裝原有的功能去做增強。



沒有留言:

張貼留言