Introduction détaillée aux composants d'ordre supérieur dans React

Cet article présente principalement l'introduction aux composants d'ordre élevé de React. Dans cet article, nous présentons en détail ce que sont les composants d'ordre élevé et comment les utiliser. Nous les partageons maintenant avec vous et leur donnons une référence. .

Définition des composants d'ordre supérieur

HoC n'appartient pas à l'API de React. Il s'agit d'un modèle d'implémentation, essentiellement une fonction qui accepte un ou plusieurs composants React. un paramètre, renvoie un tout nouveau composant React au lieu de modifier le composant existant. Ces composants sont appelés composants d'ordre supérieur. Pendant le processus de développement, lorsque certaines fonctions doivent être réutilisées dans plusieurs classes de composants, un Hoc peut être créé.

Utilisation de base

Méthode d'emballage

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <p className="container">
   <WrappendComponent {...props} />
  </p>
 );
 return WrappingComponent;
};

Dans le code ci-dessus, WrappendComponent est accepté comme paramètre, et ce paramètre est ce qui sera pour les composants ordinaires enveloppés par HoC, enveloppez un p dans le rendu et donnez-lui l'attribut className. Le WrappingComponent résultant et le WrappendComponent transmis sont deux composants complètement différents.

Dans WrappingComponent, vous pouvez lire, ajouter, modifier et supprimer les accessoires transmis à WrappendComponent, et vous pouvez également envelopper WrappendComponent avec d'autres éléments pour implémenter des styles d'encapsulation, ajouter une mise en page ou d'autres opérations.

Méthode de combinaison

const HoC = (WrappedComponent, LoginView) => {
 const WrappingComponent = () => {
  const {user} = this.props; 
  if (user) {
   return <WrappedComponent {...this.props} />
  } else {
   return <LoginView {...this.props} />
  }
 };
 return WrappingComponent;
};

Il y a deux composants dans le code ci-dessus, WrappedComponent et LoginView Si l'utilisateur existe dans les accessoires entrants, le composant WrappedComponent sera affiché. normalement, sinon le composant LoginView s'affiche pour permettre à l'utilisateur de se connecter. Les paramètres transmis par HoC peuvent être multiples. Transmettez plusieurs composants pour personnaliser le comportement du nouveau composant. Par exemple, la page principale s'affiche lorsque l'utilisateur est connecté et l'interface de connexion s'affiche lorsque l'utilisateur n'est pas connecté. Lors du rendu de la liste, transmettez les composants List et Loading pour ajouter le nouveau comportement de chargement.

Mode héritage

const HoC = (WrappendComponent) => {
 class WrappingComponent extends WrappendComponent {
  render() (
   const {user, ...otherProps} = this.props;
   this.props = otherProps;
   return super.render();
  }
 }
 return WrappingComponent;
};

WrappingComponent est un nouveau composant qui hérite de WrappendComponent et partage les fonctions et propriétés du parent. Vous pouvez utiliser super.render() ou super.componentWillUpdate() pour appeler la fonction de cycle de vie du parent, mais cela couplera les deux composants ensemble et réduira la réutilisation du composant.

Le packaging des composants dans React est basé sur l'idée de la plus petite unité disponible. Idéalement, un composant ne fait qu'une seule chose, ce qui est conforme au principe de responsabilité unique de la POO. Si vous devez améliorer les fonctionnalités d'un composant, améliorez le composant en le combinant ou en ajoutant du code au lieu de modifier le code d'origine.

Notes

N'utilisez pas de composants d'ordre supérieur dans la fonction de rendu

render() {
 // 每一次render函数调用都会创建一个新的EnhancedComponent实例
 // EnhancedComponent1 !== EnhancedComponent2
 const EnhancedComponent = enhance(MyComponent);
 // 每一次都会使子对象树完全被卸载或移除
 return <EnhancedComponent />;
}

L'algorithme diff dans React comparera l'ancien et le nouveau arborescences de sous-objets. Déterminez s'il faut mettre à jour l'arborescence de sous-objets existante ou supprimer la sous-arborescence existante et remonter.

Les méthodes statiques doivent être copiées

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

L'attribut Refs ne peut pas être transmis

La référence spécifiée dans la HoC ne sera pas transmise au Le sous-composant doit être transmis via la fonction de rappel à l'aide d'accessoires.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter une liste circulaire Nodelist Dom à l'aide de JS

Comment obtenir un changement de couleur du texte après avoir cliqué dans Vue

Comment définir la couleur d'arrière-plan d'une page distincte dans Vue-cli

Actualisation et changement d'onglet dans vue

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!