Composants d'ordre supérieur (HOC) dans React

Les composants d'ordre supérieur (HOC) dans React sont des fonctions qui prennent un composant et renvoient un nouveau composant avec des fonctionnalités améliorées. Ils vous permettent de réutiliser la logique sur plusieurs composants sans dupliquer le code.

Voici un exemple basique de HOC :

import React from 'react';

// A Higher-Order Component
function withExtraInfo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <div>
        <p>This is extra info added by the HOC!</p>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// A regular component
function MyComponent() {
  return <p>This is my component!</p>;
}

// Wrap the component with the HOC
const EnhancedMyComponent = withExtraInfo(MyComponent);

function App() {
  return <EnhancedMyComponent />;
}

export default App;

Points clés sur les HOC :

• Objectif : utilisé pour ajouter une logique réutilisable aux composants (par exemple, journalisation, autorisations, etc.).
• Fonctions pures : Elles ne modifient pas le composant d'origine mais en renvoient un nouveau.
• Cas d'utilisation courants : autorisation, changement de thème, récupération de données, etc.

Bien que les HOC étaient plus couramment utilisés avant l'introduction des hooks React, ils sont toujours utiles dans de nombreux cas.

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!