React高階元件（裝飾器）的介紹（程式碼範例）

這篇文章帶給大家的內容是關於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 >
                    <p >这是高阶组件特有的函数</p >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

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

export default Hello

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

'元素了。

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

反向繼承的例子：

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

我們可以透過componentDidMount來修改原有元件生命週期發生的事件，這就是反向繼承的方式。

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

#

以上是React高階元件（裝飾器）的介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！