Conteneur vs Composants de présentation dans React

Il est important de garder à l'esprit que les composants de conteneur et les composants de présentation vont de pair lors de la configuration d'une hiérarchie de composants de l'application React. Les applications React auront presque toujours besoin de composants qui assument la responsabilité du fonctionnement des choses et de composants d'affichage de données réelles. Lorsque les composants de présentation ne gèrent pas l’état, les composants de conteneur le font. Lorsque les composants de présentation sont généralement des enfants dans la hiérarchie des composants d'application, les composants de conteneur sont généralement les parents des composants de présentation.

Que sont les composants du conteneur?

  • Les composants de conteneur sont principalement concernés par la façon dont les choses fonctionnent
  • ils ont rarement leurs propres balises HTML, mis à part un wrapping
  • ils sont souvent stateful
  • ils sont responsables de fournir des données et un comportement à leurs enfants (généralement des composants de présentation)

Voici un exemple de composant conteneur:

class Collage extend Component {
   constructeur (accessoires) {
      super (accessoires);
      
      this.state = {
         images: []
      };
   }
   composantDidMount () {
      fetch ('/ api / current_user / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   render () {
      revenir (
         
            {this.state.images.map (image => {                
                                               })}                 )    } }

En revanche, quelles sont les composantes de la présentation?

  • Les composants de présentation concernent principalement l'aspect de la situation
  • probablement seulement contenir une méthode de rendu et peu d'autre logique
  • ils ne savent pas comment charger ou modifier les données qu'ils rendent
  • ils sont mieux écrits en tant que composants fonctionnels sans état

Voici un exemple de composant de présentation:

// définition du composant en tant que composant React
La classe Image étend le composant {
   render () {
      return ;
   }
}
export par défaut Image
// définissant le composant comme une constante
const Image = props => (
   
)
export par défaut Image

Avec les composants de présentation, vous avez la possibilité de les définir comme des composants de réaction standard ou en tant que constantes. Les définir en tant que constantes peut aider à supprimer certaines dépendances et à importer des lignes de code supplémentaires. Ainsi, de cette manière, définir des composants de présentation en tant que constantes peut réduire le temps de chargement des applications si vous avez beaucoup de données à charger.

Séparation des problèmes à l'aide d'un composant conteneur

Heureusement, en utilisant React, nous avons la possibilité de composer notre interface utilisateur à partir de plusieurs composants React. Gardant cela à l'esprit, nous pouvons séparer l'exemple de composant de conteneur ci-dessus en deux composants. Tout d’abord, nous séparons la couche d’interface utilisateur en un composant de présentation. Ensuite, nous encapsulons ce composant de présentation dans un composant de conteneur plus grand qui transmet les accessoires en composants de présentation sous forme d’enfants. De cette manière, le conteneur peut alors gérer l'état et toute autre logique d'application.

Voici à quoi cela pourrait ressembler:

const Image = props => (
   
)
export par défaut Image
la classe ImageContainer étend React.Component {
   constructeur () {
      super();
      
      this.state = {
         images: []
      };
   }
   composantDidMount () {
      fetch ('/ api / current_user / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   render () {
      revenir (
         
            {this.state.images.map (image => {                             })}                 )    } } Exporter par défaut ImageContainer

Pour récapituler, nous avons divisé le composant d’origine en deux parties. Tous les états contenus dans notre composant conteneur ImageContainer, et notre logique sont toujours les mêmes. Le composant de présentation Image est sans état et est maintenant incroyablement stable et concis. Ainsi, si les données de l'API sont modifiées (par exemple, si src est modifié en lien), nous pourrons effectuer cette mise à jour dans un seul composant de présentation qui mettra à jour tous les enfants de cette fonction de carte. Cela nous permet également de restituer autant d'images que possible, car Image est maintenant un composant réutilisable dans React. Rappelez-vous toujours que les composants réutilisables sont sans doute l’un des aspects les plus puissants de React. Il est donc important de toujours en tenir compte lors de la conception de la structure de votre application.