理解React高階組件（裝飾器）

首先在正式的高階組件以前咱們先來了解一下函數的相似操做：

function hello () {
    console.log('hello')
}

function WrapperHello (fn) {
    return function () {
        console.log('before')
        fn && fn()
        console.log('after')
    }
}

hello = WrapperHello(hello)

hello()

以上這段代碼的輸出會先輸出before，而後 hello，最後再是after，hello函數至關於在外包裹了一層統一邏輯再進行了返回，而且聲明是又將本來的hello函數進行了覆蓋，這就是高階組件的基礎原理。

而後咱們再寫一個基礎的高階組件對比一下：

import React, { Component, Fragment } from 'react'

function WrapperHello (Comp) {
    class WrapComp extends Component {
        render () {
            return (
                <Fragment >
                    <div >這是高階組件特有的函數</div >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

@WrapperHello
class Hello extends Component {
    render () {
        return (
            <div >Hello</div >
        )
    }
}

export default Hello

那麼在這呢，不難發現其實組件也是一個函數，咱們採用了同種思想對其進行了統一的數據處理，在WrapperHello函數中傳入的Comp組件，而後咱們統一返回一個WrapComp函數，其中Comp在render的時候咱們傳入和父級傳遞的全部props進行數據的所有交互，而後再在Hello組件上咱們用@符號進行一個簡易的寫法，實際上就是和以前函數包裹同樣的原理進行了一次聲明，那麼，咱們最後輸出的組件Hello，他的顯示就會包括了咱們高階組件中的‘ <div >這是高階組件特有的函數</div >’元素了。

高階組件主要又分爲屬性代理和反向繼承兩種類型，上述舉例中的函數就屬於屬性代理的類型。

反向繼承的例子：

function WrapperHello (Comp) {
    class WrapComp extends Component {
        componentDidMount () {
            console.log('高階組件新增的生命週期,加載完成')
        }
        
        render () {
            return (
                <Fragment >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

咱們能夠經過componentDidMount來修改原有組件生命週期發生的事件，這就是反向繼承的方式。

記住，高階函數返回的是一個函數，咱們只是對其進行了相對應的包裝。

若是有好的建議和問題請指出，謝謝