Composant muet, Composant intelligent, Composant pur, Composant d'ordre supérieur, Composant contrôlé et non contrôlé

Un composant est l'un des éléments de base de React. En d'autres termes, nous pouvons dire que chaque application que vous développerez dans React sera composée de pièces appelées composants. Les composants rendent la tâche de création d'interfaces utilisateur beaucoup plus facile.

« Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables et de penser à chaque élément de manière isolée. »

Ici, nous pouvons voir une interface utilisateur décomposée en plusieurs éléments individuels appelés composants et travailler dessus indépendamment et les fusionner tous dans un composant parent qui sera votre interface utilisateur finale.

Étudions maintenant les différents types de composants que nous avons dans React :

Composant Dumb / Apatride / Présentation

🦄 Les composants stupides se concentrent sur l'apparence des choses.

• Les composants stupides sont également appelés composants « de présentation » car leur seule responsabilité est de présenter quelque chose au DOM . Une fois cela fait, le composant est fait avec.
• Il n'y aura aucune logique à l' intérieur de ce composant, c'est pourquoi on l'appelle un composant stupide. Étant donné que les composants stupides se concentrent uniquement sur la présentation (composant UI), il s'agit idéalement du composant le plus réutilisable.
• Ce composant n'est souvent que des fonctions Javascript et n'a qu'une méthode render(). Il n'a pas non plus de hooks d'état ou de cycle de vie. Cependant, il peut toujours recevoir des données et fonctionner des parents via des accessoires.

1. Concentrez-vous sur l'interface utilisateur : presque tous les composants de base de l'interface utilisateur doivent être considérés comme des composants stupides. Les exemples incluent les chargeurs, les modaux, les boutons, les entrées, etc.
2. Accepter les accessoires : les composants stupides acceptent les accessoires pour leur permettre d'être dynamiques et réutilisables. Par exemple, vous pouvez envoyer le titre d'un bouton dans les accessoires du composant parent pour lui permettre d'avoir un nom unique.
3. Ne nécessite aucune dépendance d'application : à l' exception des packages d'interface utilisateur, tels que Reactstrap, les composants stupides ne nécessitent pas de dépendances.
4. Inclure rarement l'état : la seule instance où un composant stupide a un état est pour manipuler l'interface utilisateur elle-même, pas les données d'application. Certains exemples d'endroits où un composant stupide pourrait avoir un état seraient des groupes de boutons, des onglets, des commutateurs et d'autres éléments d'interface utilisateur qui n'ont pas d'impact sur les données, uniquement sur l'interface utilisateur.

const DumbComponent = (props) => {  
  return (    
    <div>      
      <ul>       
       <li> Information - {props.title} </li>      
      </ul>   
    </div>  
 )
};



🤓 Les composants intelligents se concentrent sur la façon dont les choses fonctionnent.

• En revanche, les composants intelligents (ou composants conteneurs) ont une responsabilité différente. Parce qu'ils ont le fardeau d'être intelligents, ce sont eux qui gardent une trace de l'état et se soucient du fonctionnement de l'application. En utilisant le modèle de conception de conteneur, les composants de conteneur sont séparés des composants de présentation et chacun gère son propre côté des choses. Les composants du conteneur font le gros du travail et transmettent les données aux composants de présentation en tant qu'accessoires.
• Le modèle de composant de conteneur est un composant basé sur des classes et possède des fonctions constructeur(). Nous initialisons généralement l'état à l'intérieur du constructeur, bien que vous puissiez supprimer le constructeur et avoir toujours un état.
1. Manipule les données : les composants intelligents peuvent récupérer, capturer les modifications et transmettre les données d'application.
2. Appelez Redux, méthodes de cycle de vie, API, bibliothèques, etc. : ces composants sont appelés intelligents pour une raison ! Ils sont responsables de l'appel des bibliothèques et des fonctionnalités.
3. Gérer l'état : les composants intelligents sont responsables de la gestion de l'état et de savoir quand refaire le rendu d'un composant.
4. Inclut rarement le style : étant donné que les composants stupides se concentrent sur le style, cela permet au composant intelligent de se concentrer sur la fonctionnalité sans l'encombrement des styles.

class SmartComponent extends Component {  
  constructor(props) {      
     super(props);      
     this.state = {        
       firstTimeLoading: true      
     }  
  } 
 
  render() {   
    return (      
          {this.state.firstTimeLoading 
             && <Header title={this.props.title}/>}         
          {this.state.firstTimeLoading 
             || <Header title="Welcome Again"/>}         
    );  
  }
}

5. Pure Component est l'un des moyens les plus importants d'optimiser les applications React.
6. L'utilisation de Pure Component donne une augmentation considérable des performances car elle réduit le nombre d'opérations de rendu dans l'application.

class Welcome extends React.PureComponent {
  render() {
   return <h1>Welcome</h1>
  }
}

7. En effet, PureComponent modifie la méthode de cycle de vie shouldComponentUpdate et ajoute une logique pour vérifier automatiquement si un nouveau rendu est requis pour le composant. Cela permet à un PureComponent d'appeler la méthode render uniquement s'il détecte des changements d'état ou d'accessoires.
• Un composant d'ordre supérieur dans React est un modèle utilisé pour partager des fonctionnalités communes entre les composants sans répéter le code. Un composant d'ordre supérieur n'est en fait pas un composant, c'est une fonction . Une fonction HOC prend un composant comme argument et renvoie un composant. Il transforme un composant en un autre composant et ajoute des données ou des fonctionnalités supplémentaires. En bref:

const NewComponent = (BaseComponent) => {
  // ... create new component from old one and update
  return UpdatedComponent
}

• Un composant d'ordre supérieur est une fonction qui prend un composant comme argument et renvoie un composant. Cela signifie qu'un HOC aura toujours une forme similaire à la suivante :
• Le higherOrderComponentest une fonction qui prend un composant appelé WrappedComponentcomme argument. Nous créons un nouveau composant appelé HOCqui renvoie le <WrappedComponent/>de sa renderfonction. Bien que cela n'ajoute en fait aucune fonctionnalité dans l'exemple trivial, il décrit le modèle commun que suivra chaque fonction HOC. Nous pouvons invoquer le HOC comme suit :

const SimpleHOC = higherOrderComponent(MyComponent);

import React from 'react';
var newData = {
   data: 'Data from HOC...',
}
var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}
export default MyHOC(MyComponent);


• Un HOC devrait être une fonction pure sans effets secondaires. Il ne doit apporter aucune modification et se contenter de composer le composant d'origine en l'enveloppant dans un autre composant.
• N'utilisez pas de HOC dans la méthode de rendu d'un composant. Accédez au HOC en dehors de la définition du composant.
• Les méthodes statiques doivent être copiées pour y avoir toujours accès. Un moyen simple de le faire est le hoist-non-react-staticspackage.
• Les références ne sont pas transmises.
• Un composant contrôlé est lié à une valeur et ses modifications seront gérées dans le code à l'aide de rappels basés sur des événements . Ici, l'élément de formulaire d'entrée est géré par la réaction elle-même plutôt que par le DOM. En cela, l'état mutable est conservé dans la propriété state et sera mis à jour uniquement avec la méthode setState(). L'état au sein du composant sert de « source unique de vérité » pour les éléments d'entrée qui sont rendus par le composant.
• Les composants contrôlés ont des fonctions qui régissent les données qui leur sont transmises à chaque événement onChange . Ces données sont ensuite enregistrées dans l'état et mises à jour avec la méthode setState(). Cela permet au composant d'avoir un meilleur contrôle sur les éléments et les données du formulaire.

Ce composant est assez simple, mais il prouve un point : React est celui en charge de contrôler quand et comment le rendre en fonction de la logique interne de la setStateméthode. Nous n'avons pas à nous soucier de quoi que ce soit d'autre.

C'est la méthode recommandée pour écrire des composants (que ce soit en utilisant des classes ou des composants fonctionnels, assurez-vous simplement qu'il s'agit de composants contrôlés) principalement en raison de tous les avantages du framework qui leur est appliqué. Vous obtenez une couche d'abstraction au-dessus du DOM qui vous permet de réagir et d'interagir avec les éléments sans avoir à vous soucier des méthodes API DOM de bas niveau.

Composant non contrôlé

• Il est similaire aux entrées de formulaire HTML traditionnelles. Ici, les données du formulaire sont gérées par le DOM lui-même . Il conserve son propre état et sera mis à jour lorsque la valeur d'entrée change.
• Pour écrire un composant non contrôlé, il n'est pas nécessaire d'écrire un gestionnaire d'événement pour chaque mise à jour d'état, et vous pouvez utiliser une référence pour accéder à la valeur du formulaire à partir du DOM.

Le composant ci-dessus fait exactement la même chose que l'exemple précédent, il met à jour le contenu d'un pélément pendant que vous, l'utilisateur, tapez dans une inputboîte. Rien d'extraordinaire, mais vous pouvez voir comment pour obtenir le même résultat, nous avons dû écrire du code qui accède directement à l'API du DOM (c'est-à-dire que nous devions définir directement la innerHTMLpropriété de l'élément cible). Cela peut devenir beaucoup plus complexe si ce que vous essayez de faire nécessite plus de logique, mais vous comprenez le point.

Dans la plupart des cas, nous recommandons d'utiliser des composants contrôlés pour implémenter des formulaires. Dans un composant contrôlé, les données de formulaire sont gérées par un composant React. L'alternative est les composants non contrôlés, où les données de formulaire sont gérées par le DOM lui-même.

Tableau de différence entre composant contrôlé et non contrôlé



Quand dois-je utiliser le composant contrôlé et quand dois-je utiliser le composant non contrôlé ?

Fondamentalement, c'est à vous et à votre cas d'utilisation, par exemple, vous pouvez utiliser le composant contrôlé lorsque vous créez :

• Validation de formulaire , vous devez donc toujours connaître la valeur de l'entrée lors de la saisie pour vérifier s'il s'agit d'un caractère valide ou non.
• Désactivez le bouton d'envoi à moins que tous les champs aient des données valides
• Si vous avez un format spécifique comme l'entrée de carte de crédit

Et c'est tout!
J'espère que vous avez appris quelque chose de nouveau aujourd'hui. Merci d'avoir lu! :)