Différence entre l'utilisation d'un HOC et l'habillage de composants

Question

Je viens de vérifier les HOC dans React. Ils sont plutôt sympas. Cependant, le simple fait d'envelopper un composant ne permet-il pas d'obtenir le même résultat ?

Composant d'ordre supérieur

Ce simple HOC transmet l'état en tant que propriétés au ComposedComponent.

const HOC = ComposedComponent => class extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (<ComposedComponent {...this.state} />);
    }      

}

Enveloppe des composants

Ce composant transmet l'état en tant que propriétés au composant enfant.

class ParentComponent extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (
        <div>
          {React.cloneElement(this.props.children, { ...this.state })}  
        </div>
      );
    }      

}

Bien que l'utilisation soit légèrement différente entre les deux, ils semblent être tout aussi réutilisables l'un que l'autre.

Quelle est la différence réelle entre les HOC et la composition de composants via this.props.children ? Existe-t-il des exemples où vous ne pouvez utiliser que l'un ou l'autre ? Il est préférable d'utiliser les HOC. S'agit-il simplement d'un choix que vous pouvez faire en fonction de vos préférences ?

Answer 1

Les composants d'ordre supérieur (HOC) et les composants de conteneur sont différents. Ils ont des cas d'utilisation différents et résolvent des problèmes similaires, mais différents.

Les HOC sont comme des mixins. Ils sont utilisés pour composer une fonctionnalité dont le composant décoré a connaissance. Ceci est opposé aux composants conteneurs qui enveloppent les enfants et permettent aux enfants d'être muets (ou no de la fonctionnalité décorée du conteneur).

Il est vrai qu'en transférant des accessoires, les conteneurs peuvent ajouter des fonctionnalités à leurs enfants. Mais, cela se fait généralement sous la forme de props transmis aux enfants. Dans les conteneurs, cela est également difficile en raison de l'impossibilité d'ajouter simplement des accessoires à un élément déjà créé :

Ainsi, si vous vouliez ajouter une nouvelle prop à un enfant à partir de this.props.children vous devez utiliser cloneElement . Ce n'est pas aussi efficace car cela signifie que vous devez recréer les éléments.

En outre, HOC est simplement un moyen (une usine) de créer des composants. Ainsi, cela peut se produire en dehors du render .

Answer 2

Je voulais juste ajouter que lorsque vous avez besoin de composantes dynamiques d'ordre supérieur l'approche du conteneur fonctionne mieux.

Si vous avez, par exemple, 4 éléments à rendre qui pourraient avoir un HOC défini, vous voudrez créer le composant d'ordre supérieur à l'intérieur du composant. render mais comme l'appel de composants d'ordre supérieur dans le rendu provoque l'apparition de l'option <HigherOrderComponent/> à remonter à chaque rendu, cela devient une très mauvaise idée.

Ceci est documenté ici ; https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method .

Mais en général, j'opterais pour l'approche HOC.