web-dev-qa-db-fra.com

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

Je viens de vérifier les HOC dans React. Ils sont plutôt cool. Cependant, le simple emballage d'un composant n'obtient-il pas le même résultat?

Composant d'ordre supérieur

Ce HOC simple 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} />);
    }      

}

Emballage de 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, elles semblent toutes deux aussi réutilisables.

Quelle est la vraie différence entre les composants HOC et la composition via this.props.children? Y a-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 uniquement de choix que vous avez pour choisir votre saveur préférée?

reactjsreact-routerhigher-order-functionsreact-redux
40
Tabbyofjudah

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 des fonctionnalités connues du composant décoré. Cela s'oppose aux composants de conteneur qui enveloppent les enfants et permettent aux enfants d'être stupides (ou pas conscients de la fonctionnalité décorée du conteneur).

Il est vrai lors du transfert d'accessoires que les conteneurs peuvent ajouter des fonctionnalités à leurs enfants. Mais, cela se présente généralement sous la forme d'accessoires transmis aux enfants. Dans les conteneurs, cela est également gênant en raison de la limitation que vous ne pouvez pas simplement ajouter des accessoires à un élément déjà créé:

Donc, si vous vouliez ajouter un nouvel accessoire à un enfant 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.

De plus, HOC est simplement un moyen (d'usine) de créer des composants. Cela peut donc se produire en dehors de render.

31
Davin Tryon

Je voulais juste ajouter que lorsque vous avez besoin de composants dynamiques d'ordre supérieur , l'approche Container fonctionne mieux.

Si, par exemple, vous avez 4 éléments à rendre qui pourraient avoir un HOC défini, vous souhaitez créer le composant d'ordre supérieur à l'intérieur de render, mais puisque l'appel de composants d'ordre supérieur à l'intérieur du rendu provoque le <HigherOrderComponent/> à remonter sur 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.

6
pudgereyem