網頁

▼

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的裝飾者模式，都是包裝原有的功能去做增強。



沒有留言:

張貼留言