Einführung in React-Komponenten höherer Ordnung (Dekoratoren) (Codebeispiele)

Der Inhalt dieses Artikels ist eine Einführung (Codebeispiel) über hochrangige React-Komponenten (Dekoratoren). Ich hoffe, dass er für Sie hilfreich ist.

Vor formalen Komponenten höherer Ordnung lernen wir zunächst die ähnlichen Operationen von Funktionen kennen:

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

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

hello = WrapperHello(hello)

hello()

Die Ausgabe des obigen Codes wird zuerst vorher, dann hallo und schließlich danach ausgegeben Die Hallo-Funktion entspricht dem Umschließen einer Ebene einheitlicher Logik und der anschließenden Rückkehr, und die Deklaration überschreibt die ursprüngliche Hallo-Funktion. Dies ist das Grundprinzip von Komponenten höherer Ordnung.

Dann schreiben wir zum Vergleich eine grundlegende Komponente höherer Ordnung:

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

Hier ist es also nicht schwer herauszufinden, dass die Komponente tatsächlich eine Funktion ist, und wir verwenden dieselbe Idee zur Implementierung Es ist eine einheitliche Datenverarbeitung, die Comp-Komponente wird in der WrapperHello-Funktion übergeben, und dann geben wir einheitlich eine WrapComp-Funktion zurück, in der wir beim Rendern von Comp alle vom übergeordneten Element übergebenen Requisiten für alle Dateninteraktionen übergeben und dann in Hello Komponente Oben verwenden wir das @-Symbol, um eine einfache Anweisung zu erstellen, die eigentlich eine Deklaration ist, die auf dem gleichen Prinzip wie der vorherige Funktionswrapper basiert. Dann wird die Anzeige unserer endgültigen Ausgabekomponente Hello das „ <“ in unserer übergeordneten Komponente enthalten ;p >Dies ist eine Funktion, die nur für Komponenten höherer Ordnung gilt.

'

Komponenten höherer Ordnung werden hauptsächlich in zwei Typen unterteilt: Eigenschafts-Proxy und Umgekehrte Vererbung Die Funktion im Beispiel gehört zum Typ Eigenschafts-Proxy.

Beispiel für umgekehrte Vererbung:

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

Wir können die Ereignisse, die im ursprünglichen Komponentenlebenszyklus auftreten, über ComponentDidMount ändern. Dies ist die Art der umgekehrten Vererbung.

Denken Sie daran, dass Funktionen höherer Ordnung eine Funktion zurückgeben, wir packen sie einfach entsprechend ein.

Das obige ist der detaillierte Inhalt vonEinführung in React-Komponenten höherer Ordnung (Dekoratoren) (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!