Explication détaillée de l'utilisation des composants d'ordre supérieur de React

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des composants haut de gamme de React. Quelles sont les précautions d'utilisation des composants haut de gamme de React. Voici des cas pratiques, jetons un oeil.

Qu'est-ce que

Un composant d'ordre supérieur est une fonction qui accepte un composant et renvoie un nouveau composant. Il n'y a aucun effet secondaire.

Pourquoi utiliser

pour encapsuler et abstraire la logique commune des composants afin que cette partie de la logique puisse être mieux réutilisée entre les composants.

Comment utiliser

//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。
//高阶组件可以叠加使用，可以对一个组件使用多个高阶组件
@hoc       
class Hello extends React.Component {
 //
}

Comment implémenter

Proxy d'attribut

L'exemple suivant est le plus Une implémentation simple

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}
function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}

Fonction : Manipuler les accessoires et les références pour obtenir des instances de composants

Remarques : Les méthodes statiques ne peuvent pas être transmises et doivent être copiées manuellement ; les références ne peuvent pas être transmises.

Héritage inversé

L'exemple suivant est l'implémentation la plus simple

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}

Fonction : manipuler l'état ; détourner le rendu (utiliser sa fonction de rendu)

Remarque : en héritant de ImportComponent, en plus de certaines méthodes statiques, notamment le cycle de vie, l'état et diverses fonctions, nous pouvons l'obtenir.

Principe

1. Ne modifiez pas le composant d'origine, enveloppez simplement les sous-composants dans des composants de conteneur en combinant des fonctions pures avec. effets secondaires.

2. N'utilisez pas de composants d'ordre supérieur dans la méthode de rendu.

3. Les composants d'ordre supérieur peuvent ajouter des fonctionnalités aux composants, mais ne devraient pas changer radicalement les fonctionnalités.

4. Pour faciliter le débogage, choisissez un nom d'affichage pour indiquer qu'il est le résultat d'un composant d'ordre supérieur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser JS pour implémenter le texte d'invite d'attribut d'espace réservé en HTML

Comment utiliser le compte à rebours JS pour reprendre le bouton, cliquez sur Fonction

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!