Réagir des composants d'ordre supérieur

Découvrez ce que sont les composants d'ordre supérieur et comment ils sont utiles lors de la programmation d'une application React

Vous connaissez peut-être les fonctions d'ordre supérieur en JavaScript. Ce sont des fonctions qui acceptent des fonctions comme arguments et / ou renvoient des fonctions.

Deux exemples de ces fonctions sontArray.map()ouArray.filter().

Dans React, nous étendons ce concept aux composants, et nous avons donc unComposant d'ordre supérieur (HOC)lorsque le composant accepte un composant comme entrée et renvoie un composant comme sortie.

En général, les composants d'ordre supérieur vous permettent de créer du code qui est composable et réutilisable, et également plus encapsulé.

On peut utiliser un HOC pour ajouter des méthodes ou des propriétés à l'état d'un composant, ou unReduxstocker par exemple.

Vous souhaiterez peut-être utiliser des composants d'ordre supérieur lorsque vous souhaitez améliorer un composant existant, opérer sur l'état ou les accessoires, ou son balisage rendu.

Il existe une convention de préfixer un composant d'ordre supérieur avec lewithstring (c'est une convention, donc ce n'est pas obligatoire), donc si vous avez unButtoncomposant, son homologue HOC doit être appeléwithButton.

Créons-en un.

L'exemple le plus simple de HOC est celui qui retourne le composant tel quel:

const withElement = Element => () => <Element />

Rendons cela un peu plus utile et ajoutons une propriété à cet élément, en plus de tous les accessoires déjà fournis, la couleur:

const withColor = Element => props => <Element {...props} color="red" />

Nous utilisons ce HOC dans un composant JSX:

const Button = () => {
  return <button>test</button>
}
const ColoredButton = withColor(Button)

et nous pouvons enfin rendre le composant WrappedButton dans notre application JSX:

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

Il s'agit d'un exemple très simple, mais j'espère que vous pourrez comprendre l'essentiel des HOC avant d'appliquer ces concepts à des scénarios plus complexes.

Téléchargez mon gratuitManuel React

Réagir des composants d'ordre supérieur

Découvrez ce que sont les composants d'ordre supérieur et comment ils sont utiles lors de la programmation d'une application React

Plus de tutoriels de réaction: