ReactJS - Composants d'ordre supérieur

Les composants d'ordre supérieur sont des fonctions JavaScript utilisées pour ajouter des fonctionnalités supplémentaires au composant existant. Ces fonctions sontpure, ce qui signifie qu'ils reçoivent des données et retournent des valeurs en fonction de ces données. Si les données changent, les fonctions d'ordre supérieur sont réexécutées avec des entrées de données différentes. Si nous voulons mettre à jour notre composant de retour, nous n'avons pas à changer le HOC. Tout ce que nous devons faire est de changer les données que notre fonction utilise.

Higher Order Component(HOC) s'enroule autour du composant "normal" et fournit une entrée de données supplémentaire. C'est en fait une fonction qui prend un composant et renvoie un autre composant qui encapsule l'original.

Jetons un œil à un exemple simple pour comprendre facilement comment ce concept fonctionne. leMyHOC est une fonction d'ordre supérieur qui n'est utilisée que pour transmettre des données à MyComponent. Cette fonction prendMyComponent, l'améliore avec newData et renvoie le composant amélioré qui sera rendu à l'écran.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Si nous exécutons l'application, nous verrons que les données sont transmises à MyComponent.

Note- Des composants d'ordre supérieur peuvent être utilisés pour différentes fonctionnalités. Ces fonctions pures sont l'essence même de la programmation fonctionnelle. Une fois que vous y serez habitué, vous remarquerez à quel point votre application devient plus facile à maintenir ou à mettre à niveau.