Dans cette partie de la traduction du cours de formation React, nous vous suggérons de terminer la tâche pratique de travailler avec des composants basés sur la classe. Après cela, nous commencerons à maîtriser un concept aussi important de React que l'état des composants.
→
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 composantsPartie 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 coursLeçon 25. Atelier. Composants basés sur la classe
→
Original▍Emploi
Vous trouverez ci-dessous le code qui doit être placé dans le fichier
index.js d'une application React standard créée par
create-react-app . Convertissez les composants fonctionnels que vous trouverez dans ce code en composants basés sur les classes et, en outre, recherchez et corrigez une petite erreur.
Le code du fichier
index.js :
import React from "react" import ReactDOM from "react-dom"
▍Solution
Tout d'abord, regardons ce que l'application donne dans sa forme originale en l'ouvrant dans un navigateur.
Page source du navigateurVous pouvez voir que la ligne supérieure qui apparaît sur la page ne semble pas correcte. Après la virgule suivant Welcome, il devrait évidemment y avoir quelque chose comme un nom d'utilisateur.
Si nous analysons le code de l'application, il s'avère que le composant
Header -
Header affiche cette ligne, en attendant d'obtenir la propriété de
username définie lors de la création de son instance. Une instance de ce composant est créée dans le composant
App . Après avoir découvert cela, nous serons en mesure de corriger l'erreur même qui a été mentionnée dans la mission.
Il convient de noter que les composants sont généralement placés dans des fichiers différents, mais dans ce cas, nous les avons tous décrits dans un seul fichier.
Nous procédons à la transformation du composant fonctionnel de l'
App en un composant basé sur la classe. Pour ce faire, il suffit d'amener son code sous cette forme:
class App extends React.Component { render() { return ( <div> <Header username="vschool"/> <Greeting /> </div> ) } }
Maintenant, le mot
class clé
class vient avant le nom du composant, suivi de la
extends React.Component , après quoi le corps de la classe est décrit entre crochets. Il devrait y avoir une méthode
render() retournant ce que nous avons retourné du composant fonctionnel. Les autres composants sont traités de la même manière. Faites attention à la construction de
<Header username="vschool"/> . Ici, nous transmettons la propriété
username avec la valeur de
vschool composant
Header , corrigeant ainsi l'erreur qui se trouve dans l'application d'origine.
Comme vous le savez déjà, le composant
Header s'attend à obtenir la propriété
username et, dans le composant fonctionnel, cette propriété est accessible à l'aide de la construction
props.username (
props dans ce cas est un argument de la fonction qui décrit le composant). Dans les composants basés sur les classes, la même chose ressemble à
this.props.username . Voici le code repensé du composant
Header -
Header :
class Header extends React.Component { render() { return ( <header> <p>Welcome, {this.props.username}!</p> </header> ) } }
Le troisième élément,
Greeting , est légèrement différent des autres. Le fait est que, avant la commande de
return , certains calculs sont effectués. Lors de sa conversion en composant basé sur une classe, ces calculs doivent être placés dans la méthode
render() avant la commande return. Voici le code du composant
Greeting repensé:
class Greeting extends Component { render() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay} to you, sir or madam!</h1> ) } }
Notez que ce composant a été utilisé dans la déclaration de ce composant:
class Greeting extends Component . Ceci est souvent fait dans un souci de brièveté, mais pour que cela fonctionne, nous devons affiner la commande d'importation
react , en l'amenant à cette forme:
import React, {Component} from "react"
Voici à quoi ressemble la page d'application recyclée dans un navigateur.
Page d'application repensée dans le navigateurEn fait, cela ressemble à la page de l'application d'origine, et la seule différence notable entre ces pages est que le nom d'utilisateur transmis au composant
Header -
Header est maintenant affiché dans la première ligne.
Voici le code complet du fichier
index.js traité:
import React, {Component} from "react" import ReactDOM from "react-dom"
Si la mise en œuvre de cette tâche pratique ne vous a posé aucun problème - tant mieux. Si vous n'êtes toujours pas à l'aise avec les composants basés sur les classes, prenez le temps de les expérimenter. Par exemple, vous pouvez refaire des composants basés sur des classes en composants fonctionnels, puis effectuer la transformation inverse.
Leçon 26. État des composants
→
OriginalL'État est un concept React incroyablement important. Si le composant doit stocker ses propres données et gérer ces données (contrairement à la situation où le composant parent lui transfère des données à l'aide du mécanisme de propriété), utilisez l'état du composant. Aujourd'hui, nous examinons les concepts de base concernant l'état des composants.
Un état n'est que les données contrôlées par le composant. En particulier, cela signifie que le composant peut modifier ces données. En même temps, les propriétés qui nous sont déjà familières, obtenues par le composant à partir du composant parent, ne peuvent pas être modifiées par le composant récepteur. Selon la
documentation React, ils sont immuables (immuables). Par exemple, si nous essayons, dans un composant basé sur une classe, d'utiliser une construction comme
this.props.name = "NoName" , nous rencontrerons un message d'erreur.
Il convient de noter que si un composant doit fonctionner avec l'état, il doit s'agir d'un composant basé sur la classe. Parlons de la façon d'équiper le composant avec l'état en commençant par le fragment de code suivant, qui est le contenu du fichier
App.js d'un projet standard créé par
create-react-app :
import React from "react" class App extends React.Component { render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } export default App
Voici à quoi ressemble la page d'application dans un navigateur.
Page d'application dans le navigateurAfin d'équiper un composant avec un état, vous devez d'abord créer un constructeur de classe. Cela ressemble à une méthode de classe
constructor() . Après cela, le code du composant ressemblera à ceci:
class App extends React.Component { constructor() { } render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } Constructor()
Il s'agit d'une méthode spéciale intégrée à JavaScript conçue pour créer et initialiser des objets basés sur des classes. En fait, si vous devez initialiser quelque chose lors de la création d'un objet, les opérations correspondantes sont effectuées exactement dans la méthode
constructor() .
La première chose à faire dans le code constructeur est d'appeler le constructeur de la classe parent. Cela se fait en utilisant la fonction
super() . Dans le constructeur de la classe parente, certaines opérations d'initialisation peuvent être effectuées, dont les résultats seront utiles à notre objet. Voici à quoi ressemblera notre constructeur de classe:
constructor() { super() }
Maintenant, afin d'équiper le composant avec state, nous devons, dans le constructeur, ajouter la propriété
state à l'instance de classe. Cette propriété est un objet:
constructor() { super() this.state = {} }
Ici, nous l'avons initialisé avec un objet vide. Vous pouvez travailler avec state dans le code du composant à l'aide de la construction
this.state . Ajoutez une nouvelle propriété à l'état:
constructor() { super() this.state = { answer: "Yes" } }
Voyons maintenant comment utiliser ce qui est stocké dans l'état dans le code. Rappelez-vous que le composant affiche la question
Is state important to know? . L'État stocke la réponse à cette question. Pour ajouter cette réponse après la question, vous devez faire la même chose que nous faisons habituellement en ajoutant des constructions JavaScript au code JSX. À savoir, ajoutez la construction
{this.state.answer} à la fin de la ligne. Par conséquent, le code de composant complet ressemblera à ceci:
class App extends React.Component { constructor() { super() this.state = { answer: "Yes" } } render() { return ( <div> <h1>Is state important to know? {this.state.answer}</h1> </div> ) } }
Et voici à quoi ressemblera la page d'application dans le navigateur.
Page d'application dans le navigateurIci, je voudrais noter que l'état que le composant reçoit lors de l'initialisation peut être modifié pendant le fonctionnement du composant. De plus, les composants peuvent transmettre l'état aux composants descendants à l'aide du mécanisme de travail avec des propriétés que vous connaissez déjà. Par exemple, dans notre cas, si nous supposons qu'il existe un certain composant de
ChildComponent , les données de l'état peuvent lui être transférées comme ceci:
<ChildComponent answer={this.state.answer}/>
Bien que nous ne parlerons pas en détail de la façon de modifier les données stockées dans l'état du composant. Nous notons seulement que lorsque vous appelez la méthode
setState() , qui est utilisée pour résoudre ce problème, non seulement l'état du composant sera modifié, mais également les données d'état transmises via le mécanisme de propriété à ses composants enfants seront mises à jour. De plus, la modification de l'état entraînera la modification automatique des données de l'état affiché sur la page de l'application.
Résumé
Aujourd'hui, vous avez eu l'occasion de travailler avec des composants basés sur des classes. De plus, votre introduction au concept de statut de composant a commencé ici. La prochaine fois, vous trouverez des tâches pratiques pour travailler avec l'État.
Chers lecteurs! Si vous utilisez React dans la pratique, veuillez nous expliquer comment vous gérez l'état des composants. Utilisez-vous des outils React standard ou autre chose?
