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