Explication détaillée des sous-composants fonctionnels et des composants d'ordre supérieur dans React

Cet article vous apporte une explication détaillée des sous-composants fonctionnels et des composants d'ordre supérieur dans React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Après être entré en contact avec les projets React, la plupart des gens devraient déjà avoir compris ou utilisé HOC (High-Order-Components) et FaCC (Functions as Child Components), car ces deux modèles sont largement utilisés. Ils existent dans la plupart réagir aux bibliothèques open source. Par exemple, withRouter dans React-Router est un composant d'ordre élevé typique, qui accepte un composant et renvoie un autre composant amélioré. Le mouvement en réaction-motion est une application FaCC typique.

HOC et FaCC font des choses très similaires, les deux sont similaires au modèle de décorateur dans le modèle de conception. Toutes les fonctions sont améliorées sur les instances ou unités d'origine.

Bien sûr, il n'est pas seulement utilisé dans certaines bibliothèques open source, mais aussi dans l'écriture de code quotidienne, il existe de nombreux endroits où il convient d'utiliser HOC et FaCC pour encapsuler une certaine logique. Par exemple, les points d'enfouissement des données, l'activation de nouvelles fonctionnalités, l'obtention de données de conversion, etc. Très utile pour améliorer la lisibilité du code et la réutilisation de la logique.

HOC

Nous avons tous utilisé des fonctions d'ordre supérieur, qui acceptent une fonction et renvoient une fonction encapsulée :

const plus = first => second => (first + second)
plus(1)(2) // 3

Et les composants d'ordre supérieur sont d'ordre élevé fonctions Le concept est appliqué aux composants d'ordre supérieur :

const withClassName = ComposedComponent => props => (
   <ComposedComponent {...props} className=&#39;demo-class&#39; />
)

// 使用
const Header = text => (<header>{text}</header>)
const headerWitheClass = withClassName(Header)

accepte un composant et renvoie un nouveau composant enveloppé. Le withRouter que nous utilisons souvent consiste à ajouter des attributs tels que props au composant d'origine localtion. En plus d'ajouter des accessoires, les composants d'ordre élevé peuvent également :

• Faire certaines choses avant et après avoir réellement appelé le composant, comme enterrer des données, etc.

• Déterminez si le composant doit être rendu ou doit restituer d'autres choses, comme le rendu de la page d'erreur après une erreur

• Passer les accessoires et ajouter de nouveaux accessoires

• Au lieu de restituer le composant, faites d'autres choses, comme le rendu d'un dom externe

Les trois premiers points ci-dessus sont relativement faciles à comprendre s'il vous plaît. expliquez le quatrième point. Par exemple, après avoir rendu une page, vous devez modifier le titre de la page. Il s'agit d'une exigence courante pour les applications monopage. Vous pouvez généralement utiliser des hooks dans une bibliothèque de routeur spécifique pour y parvenir. Bien sûr, cela peut également être réalisé via HOC :

const withTitleChange = ComposedComponent => {
  return class extends React.Component {
    componentDidMount () {
      const { title } = this.props
      document.title = title
    }
    render () {
      const props = this.props
      return <ComposedComponent {...props} />
    }
  }
}

FaCC

De même, FaCC est également un mode utilisé pour améliorer les capacités des composants d'origine. Sa fonction principale est implémentée dans React. props.children Peut être n'importe quoi, y compris les fonctions. Nous pouvons prendre l'exemple de classe ci-dessus et l'implémenter à nouveau avec FaCC :

const ClassNameWrapper = ({ children }) => children('demo-class')

// 使用

const HeadWithClass = (props) => (
  <ClassNameWrapper>
    {(class) => <header classNmae={class} ></header>}
  </ClassNameWrapper>
)

Dans FaCC, vous pouvez également faire beaucoup de choses dans le cycle de vie comme HOC pour encapsuler les composants d'origine. Fondamentalement, HOC peut être fait. faire tout ce que fait FaCC. Le projet sur lequel je travaillais utilisait HOC à grande échelle. Après quelques discussions, il a commencé à se transformer en FaCC à grande échelle.

Différences

Les deux sont utilisés pour améliorer les composants d'origine. Lequel faut-il utiliser ? Quel est le bon modèle ? Il y a beaucoup de discussions à ce sujet dans la communauté. Par exemple, certaines personnes disent que FaCC est un anti-modèle : Function as Child Components Are an Anti-Pattern. La raison qu'il a donnée était que les enfants n'étaient pas sémantiques et pourraient prêter à confusion. Il a ensuite proposé le modèle Component Injection, que les étudiants intéressés peuvent lire.

Faisons une comparaison sous plusieurs aspects :

1. Étape de composition

L'étape de combinaison signifie HOC, FaCC et When combinant composants améliorés. On constate clairement que FaCC affiche davantage d'informations de dépendance sur l'amarrage des composants avant et arrière, ce qui est relativement plus facile à comprendre. Quant à HOC, comment se relier les uns aux autres ? Vous devez approfondir le HOC et lire le code pour savoir ce que fait ce HOC.

// HOC example
import View from './View'

const DetailPage = withServerData(withNavigator(View))

// FaCC example

import View from './View'

const DetailPage = props => (
  <FetchServerData>
    {
      data => (
        <Navigator>
          <View data={data} {...props} />
        </Navigator>
      )
    }
  </FetchServerData>
)

Si vous ajoutez 2 HOC supplémentaires par-dessus, le processus de combinaison ci-dessus deviendra très moche. Relativement parlant, avec FaCC, la manière dont il est encapsulé, l'origine de la source de données et les données que le composant reçoit sont tous plus visibles.

1. Optimisation des performances

Dans HOC, nous pouvons recevoir des accessoires de l'hôte, car les accessoires sont transmis par HOC, nous avons donc également Pour le cycle de vie complet, nous pouvons utiliser l'optimisation ShouldComponentUpdate. Ce n'est pas le cas de FaCC, qui ne peut pas comparer les accessoires en interne. Ce n'est que lors de la combinaison d'un composant externe que les accessoires peuvent être comparés.

1. Flexibilité

FaCC est plus flexible que HOC dans la phase de combinaison. Il ne précise pas comment le composant amélioré utilise les attributs qu'il transmet. . Le HOC est essentiellement finalisé après sa rédaction.

De plus, FaCC ne créera pas de nouveau composant, tandis que HOC créera un nouveau composant et lui transmettra des accessoires.

Résumé

De nombreuses bibliothèques open source de la communauté ont utilisé les deux modes, et de nombreux articles les comparent. Il y a eu également de nombreuses discussions animées et, bien sûr, les deux modèles ont permis de résoudre définitivement le problème. En raison de différentes considérations, le choix peut être différent.

Recommandations associées :

Analyse des instances de composants d'ordre élevé React

Instances de composants contrôlés et non contrôlés dans React Explication détaillée

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!