Aujourd'hui, nous publions une traduction du prochain didacticiel React. Il se concentre sur les composants basés sur les classes. Ces composants sont créés à l'aide du mot clé class.
→
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 24. Composants basés sur les classes
→
OriginalSi, avant de commencer à maîtriser cette formation, vous avez étudié React sur la base d'autres cours, vous pouvez avoir une question sur le fait que nous utilisons des composants fonctionnels ici. Le fait est que dans de nombreux autres cours, ce sujet n'est pas couvert ou que les composants fonctionnels sont considérés comme quelque chose qui n'est pas particulièrement nécessaire. Certains auteurs vont encore plus loin et disent qu'il vaut mieux ne pas utiliser de composants fonctionnels, préférant les composants basés sur les classes. À leur avis, cela sauve le programmeur d'une charge inutile. Je crois que quiconque étudie React trouvera utile de voir l'image complète et de se renseigner sur les approches de composants qui sont populaires de nos jours. En particulier, la direction est désormais pertinente, en fonction des composants fonctionnels utilisés dans la mesure du possible et des composants basés sur les classes uniquement là où ils sont vraiment nécessaires. Il convient de noter que tout cela n'est qu'une recommandation. Chaque développeur décide exactement comment il va concevoir ses applications.
Lorsque j'enseigne des cours React, je préfère commencer par les composants fonctionnels, car les fonctions sont des constructions claires. Un simple coup d'œil sur un composant fonctionnel suffit pour comprendre exactement quelles actions il effectue. Disons, voici le code d'un composant fonctionnel, qui est une fonction régulière qui renvoie un élément
<div> contenant un élément
<h1> avec du texte.
function App() { return ( <div> <h1>Code goes here</h1> </div> ) }
Mais, en approfondissant l'étude de React, en nous familiarisant avec ses capacités, il s'avère que les composants fonctionnels ne sont pas en mesure de nous offrir tout ce dont nous pouvons avoir besoin de React-components. Par conséquent, nous parlerons aujourd'hui de composants basés sur les classes. À savoir, commençons par créer un composant basé sur une classe qui effectue les mêmes actions que le composant fonctionnel ci-dessus. Dans la prochaine leçon, nous aborderons ces fonctionnalités supplémentaires qui nous donnent des composants basés sur les classes. En particulier, nous parlons de la possibilité de travailler avec l'état des composants et avec les méthodes de leur cycle de vie.
Convertissez un composant fonctionnel en composant basé sur une classe. Si vous n'êtes pas particulièrement familier avec le mot
class clé
class , qui est apparu dans ES6, et avec les possibilités qu'il ouvre aux développeurs, il est recommandé de prendre un certain temps pour mieux connaître les
classes .
Les descriptions des composants basés sur une
class commencent par le mot
class clé
class . Vient ensuite le nom du composant, compilé selon les mêmes règles que les noms des composants fonctionnels. En même temps, après une construction comme la
class App ne ressemblera pas à une accolade, mais une construction du formulaire
extends React.Component . Après cela, mettez une paire d'accolades bouclées dans lesquelles le corps de la classe sera décrit.
Les classes en JavaScript sont un complément au modèle d'héritage de prototype traditionnel. L'essence de la construction de la
class App extends React.Component est que nous déclarons une nouvelle classe et
React.Component que son prototype doit être
React.Component . La présence de ce prototype dans notre composant nous permet d'utiliser toutes les fonctionnalités utiles disponibles dans
React.Component dans ce composant.
Donc, à ce stade du travail sur un composant basé sur des classes, son code ressemble à ceci:
class App extends React.Component { }
Un composant basé sur une classe doit avoir au moins une méthode. Il s'agit de la méthode
render() . Cette méthode doit renvoyer la même chose que nous renvoyons habituellement des composants fonctionnels. Voici à quoi ressemble le code complet d'un composant basé sur une classe, implémentant les mêmes fonctionnalités que le composant fonctionnel ci-dessus.
class App extends React.Component { render() { return ( <div> <h1>Code goes here</h1> </div> ) } }
Travaillez avec les composants basés sur les classes de la même manière que les composants fonctionnels. Autrement dit, dans notre cas, il suffit de remplacer le code du composant fonctionnel par le nouveau code et l'application fonctionnera comme auparavant.
Parlons de la méthode
render() . Si, avant de former les éléments retournés par cette méthode, vous devez effectuer des calculs, ils sont effectués dans cette méthode, avant la commande
return . Autrement dit, si vous disposez d'un code qui détermine l'ordre dans lequel la présentation visuelle du composant est formée, ce code doit être placé dans la méthode de
render . Par exemple, ici, vous pouvez personnaliser les styles si vous utilisez des styles intégrés. Il y aura également du code qui implémente le mécanisme de rendu conditionnel et d'autres constructions similaires.
Si vous connaissez les classes, vous pouvez créer votre propre méthode et y placer le code qui prépare le composant pour la visualisation, puis appeler cette méthode dans la méthode de
render . Cela ressemble à ceci:
class App extends React.Component { yourMethodHere() { } render() { const style = this.yourMethodHere() return ( <div> <h1>Code goes here</h1> </div> ) } }
A savoir, nous partons ici de l'hypothèse que dans la méthode
yourMethodHere() styles sont générés, et qu'il retourne est écrit dans la constante de
style déclarée dans la méthode
render() . Veuillez noter que le mot
this clé
this utilisé pour accéder à notre propre méthode. Plus tard, nous parlerons des fonctionnalités de ce mot-clé, mais pour l'instant concentrons-nous sur la conception présentée ici.
Voyons maintenant comment travailler avec les propriétés transmises aux classes lors de la création d'instances de celles-ci dans des composants basés sur les classes.
Lors de l'utilisation de composants fonctionnels, nous avons déclaré la fonction correspondante avec le paramètre
props , qui est un objet qui a reçu ce qui a été transmis au composant lors de son instanciation. Cela ressemble à ceci:
function App(props) { return ( <div> <h1>{props.whatever}</h1> </div> ) }
Lorsque vous travaillez avec un composant basé sur une classe, la même chose ressemble à ceci:
class App extends React.Component { render() { return ( <div> <h1>{this.props.whatever}</h1> </div> ) } }
Résumé
Comme déjà mentionné, les composants basés sur les classes offrent au développeur de nombreuses options. Nous parlerons davantage de ces fonctionnalités. Et maintenant, vous pouvez expérimenter ce que vous avez appris aujourd'hui et préparer une leçon pratique sur les composants basés sur les cours.
Chers lecteurs! Si vous utilisez React de manière professionnelle, veuillez nous indiquer dans quelles situations vous utilisez des composants fonctionnels et dans quels composants basés sur les classes.
