Tutoriel React, partie 20: Première leçon de rendu conditionnel

Aujourd'hui, dans la traduction de la prochaine partie du didacticiel React, nous parlerons du rendu conditionnel.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 36. Rendu conditionnel, partie 1

→ Original

Les technologies de rendu conditionnel sont utilisées dans les cas où quelque chose doit être affiché sur une page conformément à une certaine condition. Dans cette leçon, nous allons voir comment afficher un message spécial (il peut très bien être représenté par quelque chose comme un écran de chargement) pendant que l'application se prépare à fonctionner, à charger des données et, une fois prête, à remplacer ce message est pour autre chose.

Aujourd'hui, nous allons expérimenter avec une application créée à l'aide des outils App.js - App.js -app, dans le fichier App.js qui contient le code suivant:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

En outre, dans le même dossier où se trouve le fichier App.js , il existe un fichier de composant Conditional.js avec le contenu suivant:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

A ce stade des travaux, cette application ne fonctionnera pas encore, dans le processus d'analyse du matériel nous allons la corriger.

L'un des défis auxquels sont confrontés les développeurs de React est qu'ils doivent apprendre de nombreux outils pouvant être utilisés de différentes manières. Un programmeur n'est pas nécessairement limité à une seule façon d'utiliser un certain outil. Cela est influencé par le fait que le développement de React est extrêmement proche du développement en JavaScript simple.

Par conséquent, nous avons la possibilité d'utiliser différentes approches pour résoudre les mêmes problèmes, de sorte que les mêmes outils peuvent être utilisés de différentes manières. Le rendu conditionnel est la zone de React dans laquelle les idées ci-dessus se manifestent particulièrement fortement. En fait, avant de commencer, je voudrais noter que, bien que nous analyserons plusieurs approches de l'application de cette technologie, les véritables options pour son utilisation ne se limitent pas à elles.

Parlons du code avec lequel nous allons maintenant expérimenter. Nous, dans le fichier App.js , avons un composant basé sur la classe. Son constructeur a initialisé un état contenant la propriété isLoading définie sur true . Une telle conception est souvent utilisée dans les cas où, pour mettre un composant en état de fonctionnement, il est nécessaire, par exemple, d'exécuter des requêtes vers une certaine API, et pendant que le composant attend que les données arrivent et les analyse, quelque chose doit être affiché à l'écran. Cela peut prendre de 3 à 4 secondes pour terminer l'appel d'API, et vous ne voulez pas que l'utilisateur qui regarde l'écran pense que votre application a planté. Par conséquent, l'état possède une propriété qui indique si l'application effectue actuellement certaines actions de service. Et le rendu conditionnel sera utilisé pour afficher quelque chose qui indique à l'utilisateur que l'application charge actuellement quelque chose en arrière-plan.

Le code du composant App a une méthode componentDidMount() , dont nous parlerons très bientôt. En attendant, faites attention à la méthode render() . Ici, nous affichons le composant Condition , qui est importé dans le code situé en haut du fichier App.js Le composant isLoading transmis à ce composant, qui est la valeur actuelle de la propriété isLoading partir de l'état du composant App . Le code du composant Conditional ne renvoie rien qui puisse être affiché à l'écran, nous traiterons ce composant un peu plus tard. En attendant, revenons à la méthode componentDidMount() du code du composant App .

Rappelons que la méthode componentDidMount() nous permet d'exécuter du code immédiatement après l'affichage du composant, dans notre cas c'est le composant App . Dans le code de cette méthode, nous simulons un appel à une certaine API. Ici, nous réglons la minuterie sur une seconde et demie. Une fois ce temps écoulé, le code de la fonction passé à setTimeout() sera lancé. Dans cette fonction, en supposant que son appel symbolise la fin du chargement des données à partir de l'API, un changement d'état est effectué. À savoir, sa propriété isLoading est définie sur false . Cela indique que le téléchargement des données est terminé et qu'après cela, l'application peut fonctionner normalement. Dans les classes futures, nous parlerons de l'utilisation de la fonction fetch() pour charger des données, pour l'instant nous nous limiterons à la simulation ci-dessus de ce processus.

Soit dit en passant, il conviendra ici de soulever à nouveau le sujet des méthodes de cycle de vie des composants. Le fait est que dès que la propriété d'état isLoading passe de true à false , le composant Conditional reçoit une nouvelle valeur de propriété. Tout d'abord, la première fois que le composant est affiché, il reçoit, dans la propriété isLoading , true , puis, après le changement d'état, il reçoit la même propriété avec la nouvelle valeur. En fait, lorsque l'état change, la méthode render() est à nouveau appelée, par conséquent, le composant Conditional sera également affiché à nouveau. Rappelons que le Conditional est un composant fonctionnel ordinaire, c'est-à-dire que sa restitution signifie l'appel répété de la fonction à laquelle il est présenté. Mais ce que nous retournons de cette fonction lorsque nous restituons le composant peut différer de ce qui a été retourné précédemment. La raison de ce changement est le changement de ce que nous transmettons au composant.

Ainsi, le composant Conditional accepte la propriété isLoading . Avant de commencer à travailler sur le code, nous vérifierons si ces mécanismes qui existent déjà dans celui-ci fonctionnent. Pour ce faire, nous retournerons du balisage du composant et afficherons la valeur props.isLoading dans la console. Après cela, le code du composant ressemblera à ceci:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

La page d'application après cela ressemblera à celle illustrée dans la figure suivante.


Page d'application dans le navigateur

Veuillez noter que true s'affiche dans la console immédiatement après le chargement de l'application et false - après 1,5 seconde. Cela est dû au fonctionnement du mécanisme ci-dessus dans la méthode componentDidMount() du composant App .

Parlons maintenant du rendu conditionnel. Son essence réside dans le fait que nous affichons quelque chose à l'écran uniquement si une certaine condition est remplie. Dans ce cas, au lieu d'afficher la chaîne Temp sur la page, nous, dans le composant Conditional , pouvons vérifier la valeur de props.isLoading , et s'il est true , afficher le texte Loading... sur la page. Si cette valeur est false , ce qui indique la fin du téléchargement, vous pouvez renvoyer un autre texte du composant. Dans le code, cela ressemblera à ceci:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

Essayez d'exécuter ce code dans votre maison, actualisez la page et regardez comment, lorsque la page se charge, un texte s'affiche et après un certain temps - un autre.

Compte tenu des fonctionnalités JavaScript, nous pouvons simplifier le code ci-dessus comme ceci:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

Si la condition vérifiée dans le bloc if est vraie, alors l' return dans ce bloc fonctionnera, après quoi la fonction se terminera. Si la condition est fausse, l'expression de return de ce bloc n'est pas satisfaite et la fonction renvoie ce qui est spécifié dans la deuxième return de return de la fonction.

Voyons maintenant comment résoudre les problèmes de rendu conditionnel à l'aide de l' opérateur ternaire . Cette construction existe en JavaScript depuis très longtemps. Il est souvent utilisé dans React pour résoudre les tâches de rendu conditionnel. Voici à quoi ça ressemble:

  ? 1 : 2 

La valeur de l'expression 1 est retournée si la condition est vraie, la valeur de l'expression 2 est retournée si la condition est fausse.

Dans notre cas, à l'aide de l'opérateur ternaire, le code du composant Conditional peut être réécrit comme suit:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

Cette conception, bien qu'elle fonctionne, semble inhabituelle. Le fait est que les composants renvoient généralement des conceptions plus complexes. Par conséquent, enveloppez le tout dans un élément <div> :

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

Un tel code fonctionne également, bien qu'il ne soit plus comme il se doit. Tout ce qui est enfermé dans le <div&gtl; . Afin de résoudre ce problème, nous rappelons que les constructions JS utilisées dans le balisage renvoyé par les composants doivent être placées entre accolades et réécrire le code en conséquence:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

Maintenant, tout fonctionne comme il se doit.

Il convient de noter que dans le composant réel, le balisage renvoyé par eux serait plus compliqué. Ici, par exemple, dans la partie supérieure de ce que le composant affiche, une barre de navigation peut être présente, dans la partie inférieure un «pied de page» de la page peut être fourni, etc. Cela peut ressembler à ceci:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

De plus, la présence dans le balisage renvoyé par le composant d'éléments supplémentaires n'interfère pas avec les mécanismes de rendu conditionnel. De plus, ces éléments seront affichés à la fois lorsque props.isLoading est true et lorsque cette propriété est false .

Une autre amélioration qui peut être apportée à ce code est basée sur le fait que, puisque props.isLoading est une propriété booléenne qui prend la valeur true ou false , elle peut être utilisée directement sans utiliser l'opérateur de comparaison strict avec true . Le résultat est le suivant:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Nous sommes maintenant arrivés à un exemple concret de l'utilisation de la technologie de rendu conditionnel, mais les mêmes résultats peuvent être obtenus de plusieurs façons. Par exemple, généralement dans des composants comme le nôtre, les panneaux de navigation et les pieds de page ne sont pas affichés. Ces éléments de page sont généralement affichés soit par le composant App lui-même, soit par des composants spéciaux affichés par le composant App .

De plus, il convient de noter qu'ici, toute la logique du rendu conditionnel se trouve à l'intérieur de la méthode render() du composant fonctionnel, qui a été effectuée uniquement pour démontrer le code compact assemblé en un seul endroit. Mais, probablement, le composant App devrait être responsable du rendu conditionnel, et un composant similaire à notre composant Conditional devrait simplement afficher ce qui lui a été transmis. Si le composant App est responsable de déterminer si quelque chose se charge à un certain moment et lorsque cette opération est terminée, il devrait probablement être responsable de déterminer ce qui doit être affiché sur la page. Autrement dit, dans notre cas, le code pourrait être réorganisé en vérifiant la propriété isLoading dans la méthode render() du composant App et en affichant le texte comme Loading... au cas où le téléchargement ne serait pas terminé, ou en affichant un composant similaire au composant Conditional dans Si le téléchargement est terminé. Dans le même temps, le composant Conditional peut très bien ne pas accepter les propriétés de l' App , affichant uniquement ce qu'il doit produire dans tous les cas.

Voici à quoi ressemble le code du composant App, converti en fonction de ces considérations:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

Et voici le code mis à jour du composant Conditional , dans lequel il n'y a maintenant aucune vérification des conditions:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

Ici, nous avons cependant supprimé la barre de navigation et le "sous-sol", mais ce n'est pas important dans ce cas.

Résumé

Dans cette leçon, votre première introduction aux technologies de rendu conditionnel a eu lieu. La prochaine fois, nous continuerons de traiter avec eux. En particulier, vous aurez une deuxième leçon sur le rendu conditionnel et des travaux pratiques sur ce sujet.

Chers lecteurs! Si vous développez des applications React, nous vous demandons de nous indiquer comment vous effectuez le rendu conditionnel.