Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-06-04 10:48:55
original
1542 Les gens l'ont consulté

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 {
 //
}
Copier après la connexion

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"
}
Copier après la connexion

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()
 }
 }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!