Partager des exemples de démarrage avec les composants d'ordre supérieur de 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. L'éditeur pense que c'est plutôt bien. je le partagerai avec vous et le partagerai avec tout le monde. Soyez une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Définition des composants d'ordre supérieur

HoC n'est pas une API de React. C'est un modèle d'implémentation, qui est essentiellement une fonction qui. accepte Un ou plusieurs composants React sont utilisés comme paramètres et renvoient 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;
};

Ci-dessus Dans le code, WrappingComponent est accepté comme paramètre. Ce paramètre est le composant ordinaire à encapsuler par HoC. Enveloppez un p dans le rendu et donnez-lui l'attribut className 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. 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 les accessoires sont transmis Si l'utilisateur existe, le composant WrappedComponent sera affiché normalement, sinon le composant LoginView sera affiché 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.

Méthode d'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

Ne pas utiliser de composants d'ordre supérieur dans la fonction de rendu

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

L'algorithme de comparaison dans React compare l'ancienne et la nouvelle arborescence de sous-objets pour déterminer s'il faut mettre à jour l'arborescence de sous-objets existante ou supprimer le sous-arbre existant et le 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

spécifié dans la référence HoC ne sera pas transmis au composant enfant et doit être transmis à l'aide d'accessoires via la fonction de rappel.

Recommandations associées :

Utiliser Store pour optimiser la communication entre les composants React

Exemples de communication entre les composants React Tutoriel

Comparaison des balises HTML et des composants React_html/css_WEB-ITnose

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!