Que signifie réagir au composant d'ordre supérieur ?

Dans React, un composant d'ordre supérieur est une fonction, qui est une technologie avancée pour réutiliser la logique des composants ; un composant d'ordre supérieur est utilisé pour accepter un composant comme paramètre et renvoyer un nouveau composant. Les composants qui lui sont transmis, en tant que sous-composants, peuvent utiliser le proxy de propriété et l'héritage inverse pour implémenter des composants d'ordre supérieur.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Que signifie réagir avec un composant d'ordre supérieur ?

Un composant d'ordre supérieur est une fonction (pas un composant) qui accepte un composant comme paramètre et renvoie un nouveau composant. Ce nouveau composant utilisera le composant que vous lui transmettez en tant que composant enfant - Cité du livre React.js

Les composants d'ordre supérieur sont une technologie avancée dans React pour réutiliser la logique des composants. Les HOC eux-mêmes ne font pas partie de l'API React. C'est un modèle qui émerge de la nature même de la conception de React.

Lors de l'utilisation du framework React-Redux dans notre projet, il existe un concept de connexion. La connexion ici est en fait un composant d'ordre élevé. Il comprend également des concepts similaires à withRouter dans React-Router-dom

Création d'un simple hoc

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

Méthodes pour implémenter des composants d'ordre élevé

Il existe deux façons d'implémenter des composants d'ordre élevé :

• Attributs par intérim. Les composants d'ordre supérieur exploitent des accessoires via des composants React enveloppés

• héritage inversé. Les composants d'ordre élevé héritent des composants React enveloppés

Ensuite, nous expliquerons ces deux méthodes séparément.

Proxy d'attribut

Le proxy d'attribut est la méthode d'implémentation des composants d'ordre élevé courants dans notre réaction. Illustrons-le à travers un exemple :

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

La partie la plus importante d'ici est que la méthode de rendu renvoie le React passé dans Composants WrappedComponent. De cette façon, nous pouvons transmettre les accessoires via des composants d’ordre supérieur. Cette méthode est appelée proxy d'attribut.

Naturellement, il devient très facile pour nous d'utiliser le composant d'ordre supérieur MyContainer :

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

De cette façon, le composant peut être appelé comme paramètres couche par couche, et le composant d'origine en est modifié par le composant d'ordre supérieur. composant de commande. C'est aussi simple que cela : conserver l'encapsulation d'un seul composant tout en conservant la facilité d'utilisation. Bien sûr, nous pouvons également utiliser Decorator pour convertir.

Lors de la création de composants d'ordre supérieur à l'aide de proxys de propriété, l'ordre des appels est différent de celui des mixins. Le processus ci-dessus d'exécution du cycle de vie est similaire à un appel de pile :

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

Héritage inversé

Une autre façon de créer des composants d'ordre supérieur est appelée héritage inverse, qui, littéralement, doit être lié à l'héritage. Examinons également une implémentation simple.

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

Le code ci-dessus. Les composants renvoyés par les composants d'ordre supérieur héritent de WrappedComponent. Parce que WrappedComponent est hérité passivement, tous les appels seront inversés, ce qui est également l'origine de cette méthode.

Cette méthode n'est pas la même que le proxy d'attribut. Il est implémenté en héritant de WrappedComponent et les méthodes peuvent être appelées séquentiellement via super. Parce que cela repose sur le mécanisme d’héritage. La séquence d'appel de HOC est la même que celle de file d'attente.

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

Dans la méthode d'héritage inverse, les composants d'ordre supérieur peuvent être référencés à l'aide de WrappedComponent, ce qui signifie qu'ils peuvent utiliser l'état et les accessoires de WrappedComponent. Cycle de vie et méthode de rendu. Mais cela ne garantit pas que l’arborescence complète des sous-composants soit analysée. Il possède deux fonctionnalités majeures, dont nous parlerons ci-dessous.

Détournement de rendu

Le piratage de rendu signifie que les composants d'ordre supérieur peuvent contrôler le processus de rendu de WrappedComponent et restituer divers résultats. Dans ce processus, nous pouvons lire, ajouter, modifier et supprimer des accessoires dans les résultats de sortie de n'importe quel élément React, ou lire ou modifier l'arborescence des éléments React, ou l'affichage conditionnel. Ou enveloppez l'arborescence des éléments avec des styles

État de contrôle

Les composants d'ordre supérieur peuvent lire, modifier ou supprimer l'état dans l'instance WrappedComponent et ajouter un état si nécessaire.

Nom des composants

Lors de l'encapsulation d'un composant d'ordre supérieur, nous perdons le displayName du WrappedComponent d'origine, et le nom du composant est un attribut important qui facilite notre développement et notre débogage.

Paramètres des composants

Parfois, lorsque nous appelons des composants d'ordre supérieur, nous devons transmettre certains paramètres, ce qui peut être réalisé de manière très simple.

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return <WrappedComponent {...this.props} />
            }
        }
    }
}

Lorsque vous l'utilisez, vous pouvez écrire :

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)class WrappedComponent extends React.Component{}

Cela profite également des caractéristiques de la programmation fonctionnelle. On peut voir que dans le processus d'abstraction de React, son ombre peut être vue partout.

Apprentissage recommandé : "Tutoriel vidéo React"

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!