React 高階元件

GarinZhang發表於2018-03-11
React元件

定義

高階元件（High Order Component, HOC） 輸入：React 元件 => 輸出：React 元件

使用場景

高階元件的作用主要是用來加強元件，通過把基礎元件拆分成很小的粒度，通過高階元件進行增強並返回，以此提高複用性。 比如需要開發一個訊息框，一開始只需要一個模態框能夠顯示訊息就可以。後來需要多增加『確定』『取消』按鈕組，這時候只要用高階元件進行一次對基礎模態框的增強就可以。避免了對原有元件進行修改，不影響原有元件的呼叫方。

實現思路

  • Props Proxy 屬性代理
  • Inheritance Inversion 反向繼承

Props Proxy 屬性代理

核心思想是返回一個全新的元件，並在新元件中使用基礎元件，方法是：

  • 增刪改 props
  • 組合其他元件
const BasicComponent = require('BasicComponent');
const Button = require('Button');
const React = require('react');

const buttonWrapperHOC = (params) => {
    return class HOCBasicComponent extend React.Component {
        render() {
            return (
                <div>
                    <BasicComponent/>
                    <div className='button-wrapper'>
                        <Button value='確定'/>
                        <Button value='取消'/>
                    </div>
                </div>      
            );
        }
    }
}

複製程式碼

Inheritance Inversion 反向繼承

核心思想是返回一個繼承了基礎元件的元件

之所以被稱為 Inheritance Inversion 是因為 WrappedComponent 被 Enhancer 繼承了，而不是 WrappedComponent 繼承了 Enhancer。在這種方式中，它們的關係看上去被反轉（inverse）了。

可以進新的操作

  • 增刪改 props
  • 修改render輸出的DOM樹（改起來不是很方便）
const BasicComponent = require('BasicComponent');
const Button = require('Button');
const React = require('react');

const HOC = (params) => {
    return class HOCBasicComponent extend BasicComponent {
        render() {
            return super.render();
        }
    }
}
複製程式碼

相關文章