Composants React - Props et états dans ReactJS avec des exemples

'Dans React, tout est un composant'

Si vous connaissez React, vous devez avoir entendu ou lu cette phrase plusieurs fois. Mais savez-vous ce que cela signifie exactement et comment il est utilisé? Si ce n'est pas le cas, lisez ce blog pour tout savoir sur les composants React et les différentes phases du cycle de vie. Je suis sûr que lorsque tu finis en lisant ce blog, vous aurez une compréhension complète des composants React et des concepts qui les entourent. Mais avant de continuer, jetez un coup d'œil aux sujets dont je vais parler:

• Que sont les composants React?
• Avantages des composants React
• Accessoires
• États
• États vs accessoires
• Cycle de vie des composants React

Que sont les composants React?

Auparavant, les développeurs devaient écrire 1000 lignes de code pour développer une application simple d'une seule page. La plupart de ces applications suivaient la structure traditionnelle du DOM et leur apporter des modifications était très difficile et une tâche fastidieuse pour les développeurs.Ils devaient rechercher manuellement l'élément qui nécessitait le changement et le mettre à jour en conséquence. Même une petite erreur entraînerait un échec de l'application. De plus, la mise à jour du DOM était très coûteuse. Ainsi, l'approche par composants a été introduite. Dans cette approche, l'application entière est divisée en blocs logiques appelés Composants. React a été l'un des frameworks qui a opté pour cette approche.Si vous envisagez de développer votre carrière dans le développement Web, un démarrage précoce vous ouvrirait de nombreuses opportunités.

Voyons maintenant quels sont ces composants.

Les composants React sont considérés comme les éléments constitutifs de l'interface utilisateur. Chacun de ces composants existe dans le même espace mais s'exécute indépendamment les uns des autres. Les composants React ont leur propre structure, leurs propres méthodes ainsi que leurs propres API. Ils sont réutilisables et peuvent être injectés dans les interfaces selon les besoins. Pour mieux comprendre, considérez toute l'interface utilisateur comme un arbre.Ici, le composant de départ devient la racine et chacune des pièces indépendantes devient des branches, qui sont ensuite divisées en sous-branches.

Cela maintient notre interface utilisateur organisée et permet aux données et aux changements d'état de circuler logiquement de la racine aux branches, puis aux sous-branches. Les composants appellent le serveur directement du côté client, ce qui permet au DOM de se mettre à jour dynamiquement sans actualiser la page. En effet, les composants react sont construits sur le concept des requêtes AJAX. Chaque composant a sa propre interface qui peut faire des appels au serveur et les mettre à jour. Comme ces composants sont indépendants les uns des autres, chacun peut s'actualiser sans affecter les autres ou l'interface utilisateur dans son ensemble.

Nous utilisons React.createClass () méthode pour créer un composant. Cette méthode doit recevoir un argument d'objet qui définira le composant React. Chaque composant doit contenir exactement un rendre() méthode. C'est la propriété la plus importante d'un composant qui est responsable de l'analyse du HTML dans JavaScript, JSX. Cette rendre() renverra la représentation HTML du composant en tant que nœud DOM. Par conséquent, toutes les balises HTML doivent être placées dans une balise englobante à l'intérieur du rendre() .

Voici un exemple de code pour créer un composant.

comment fusionner des données dans un tableau

importer React de 'react' importer ReactDOM de la classe 'react-dom' MyComponent étend React.Component {render () {return (
Votre identifiant est {this.state.id}
)}} ReactDOM.render (, document.getElementById ('contenu'))

États vs accessoires

Cycle de vie des composants React

React fournit diverses méthodes qui notifient lorsqu'une certaine étape du cycle de vie d'un composant se produit. Ces méthodes sont appelées les méthodes du cycle de vie. Ces méthodes de cycle de vie ne sont pas très compliquées. Vous pouvez considérer ces méthodes comme des gestionnaires d'événements spécialisés appelés à différents moments de la vie d'un composant. Vous pouvez même ajouter votre propre code à ces méthodes pour effectuer diverses tâches. En parlant du cycle de vie du composant, le cycle de vie est divisé en 4 phases. Elles sont:

1. Phase initiale
2. Phase de mise à jour
3. Les accessoires changent de phase
4. Phase de démontage

Chacune de ces phases contient des méthodes de cycle de vie qui leur sont spécifiques. Voyons maintenant ce qui se passe pendant chacune de ces phases.

une. Phase initiale - La première phase du cycle de vie d'un composant React est la phase initiale ou la phase de rendu initiale. Dans cette phase,le composant est sur le point de commencer son voyage et de se diriger vers le DOM. Cette phase comprend les méthodes suivantes qui sont appelées dans un ordre prédéfini.

1. getDefaultProps (): Cette méthode est utilisée pour spécifier la valeur par défaut de this.props . Il est appelé avant même que votre composant ne soit créé ou que des accessoires du parent y soient passés.
2. getInitialState (): Cette méthode est utilisée pourspécifier la valeur par défaut de this.state avant la création de votre composant.
3. componentWillMount (): C'est la dernière méthode que vous pouvez appeler avant que votre composant ne soit rendu dans le DOM. Mais si tu appelles setState () dans cette méthode, votre composant ne sera pas rendu.
4. rendre(): Th Cette méthode est chargée de renvoyer un seul nœud HTML racine et doit être définie dans chaque composant. Vous pouvez retourner nul ou faux au cas où vous ne voudriez rien rendre.
5. componentDidMount (): Une fois le composant rendu et placé sur le DOM, ce méthode est appelée. Ici, vous pouvez effectuer toutes les opérations d'interrogation DOM.

b. Phase de mise à jour - Une fois que le composant est ajouté au DOM, ils peuvent se mettre à jour et effectuer de nouveau le rendu uniquement lorsqu'un changement d'état se produit. Chaque fois que l'état change, le composant appelle son rendre() encore. Tout composant qui dépend de la sortie de ce composant appellera également son rendre() encore. Ceci est fait, pour s'assurer que notre composant affiche la dernière version de lui-même. Ainsi, pour mettre à jour avec succès l'état des composants, les méthodes suivantes sont invoquées dans l'ordre indiqué:

1. shouldComponentUpdate (): Cette méthode vous permet de contrôler le comportement de mise à jour de votre composant. Si vous renvoyez un vrai à partir de cette méthode,le composant sera mis à jour. Sinon si cette méthode renvoie unfaux, le composant ignorera la mise à jour.
2. componentWillUpdate (): Tsa méthode s'appelle javant la mise à jour de votre composant. Dans cette méthode, vous ne pouvez pas modifier l'état de votre composant en appelant this.setState .
3. rendre(): Si vous renvoyez false via shouldComponentUpdate () , le code à l'intérieur rendre() sera à nouveau appelée pour garantir que votre composant s'affiche correctement.
4. componentDidUpdate (): Une fois le composant mis à jour et rendu, cette méthode est appelée. Vous pouvez mettre n'importe quel code dans cette méthode, que vous souhaitez exécuter une fois le composant mis à jour.

c. Phase de changement d'accessoires - Après le composant a été rendu dans le DOM, la seule autre fois que le composant sera mis à jour, à part le changement d'état, c'est lorsque sa valeur prop change. Pratiquement cette phase fonctionne de la même manière que la phase précédente, mais au lieu de l'état, elle traite des accessoires. Ainsi, cette phase n'a qu'une seule méthode supplémentaire de la phase de mise à jour.

1. componentWillReceiveProps (): Cette méthode renvoie un argument qui contient la nouvelle valeur de prop qui est sur le point d'être affectée au composant.
   Les autres méthodes du cycle de vie se comportent de manière identique aux méthodes que nous avons vues dans la phase précédente.
   
2. shouldComponentUpdate ()
3. composantWillUpdate ()
4. rendre()
5. componentDidUpdate ()

ré.La phase de démontage -Il s'agit de la dernière phase du cycle de vie des composants au cours de laquelle le composant est détruit et supprimé complètement du DOM. Il ne contient qu'une seule méthode:

1. componentWillUnmount (): Une fois cette méthode invoquée, votre composant est définitivement supprimé du DOM.Dans cette méthode, OuiVous pouvez effectuer toutes les tâches liées au nettoyage telles que la suppression des écouteurs d'événements, l'arrêt des minuteries, etc.

Voici le diagramme du cycle de vie complet:

Cela nous amène à la fin du blog sur React Components. J'espère que dans ce blog j'ai pu expliquer clairement ce que sont les composants React, comment ils sont utilisés. Vous pouvez vous référer à mon blog sur , au cas où vous souhaiteriez en savoir plus sur ReactJS.

Si vous souhaitez vous former à React et que vous souhaitez développer vous-même des interfaces utilisateur intéressantes, consultez le par Edureka, une entreprise d'apprentissage en ligne de confiance avec un réseau de plus de 250 000 apprenants satisfaits répartis dans le monde entier.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires et nous vous recontacterons.