Introduction aux composants d'ordre supérieur de React (décorateurs) (exemples de code)

Le contenu de cet article est une introduction (exemple de code) sur les composants d'ordre supérieur de React (décorateurs). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, avant les composants formels d'ordre élevé, découvrons les opérations similaires des fonctions :

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

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

hello = WrapperHello(hello)

hello()

La sortie du code ci-dessus affichera d'abord avant, puis bonjour, et Enfin, après, la fonction hello équivaut à envelopper une couche de logique unifiée à l'extérieur puis à revenir, et l'instruction écrase la fonction hello d'origine. C'est le principe de base des composants d'ordre supérieur.

Écrivons ensuite un composant de base d'ordre élevé à des fins de comparaison :

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

Donc ici, il n'est pas difficile de constater que le composant est en fait une fonction, et nous utilisons la même idée au traitement unifié des données. Le composant Comp est passé dans la fonction WrapperHello, puis nous renvoyons uniformément une fonction WrapComp. Lorsque Comp est rendu, nous transmettons tous les accessoires passés par le parent pour interagir avec les données, puis Dans Sur le composant Hello, nous utilisons le symbole @ pour faire une déclaration simple. En fait, c'est une déclaration basée sur le même principe que le wrapper de fonction précédent. Ensuite, l'affichage de notre composant de sortie final Hello inclura le contenu dans. nos composants d'ordre supérieur. '

Il s'agit d'une fonction unique aux composants d'ordre supérieur

Les composants d'ordre élevé sont principalement divisés en deux types : proxy de propriété et héritage inversé. La fonction dans l'exemple appartient au type de proxy de propriété.

Exemple d'héritage inversé :

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

Nous pouvons modifier les événements qui se produisent dans le cycle de vie du composant d'origine via composantDidMount. C'est la méthode d'héritage inverse.

N'oubliez pas que les fonctions d'ordre supérieur renvoient une fonction, nous l'enveloppons simplement en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!