PC & Mobile

Comment écrire du code React propre et facile à comprendre à l'aide de la syntaxe des propriétés de classe

Comment écrire du code React propre et facile à comprendre à l'aide de la syntaxe des propriétés de classe


Plus besoin de lier les gestionnaires d'événements dans le constructeur

Photo de Filiberto Santillán sur Unsplash

Nous verrons aujourd’hui un moyen de simplifier le code de réaction en supprimant la nécessité de lier chaque nouveau gestionnaire d’événements ajouté au composant.

Regardez le code ci-dessous

Démo en direct: https://codesandbox.io/s/boring-wu-qud80

Nous avons ici un compteur initialisé à zéro au début. Nous avons également ajouté un gestionnaire d’événements qui augmente la valeur du compteur de un lorsque nous cliquons sur le bouton «Ajouter un».

Utiliser le mot-clé cette à l'intérieur du gestionnaire d'événements, nous devons le lier dans le constructeur en tant que

this.handleAddOne = this.handleAddOne.bind (this);

Aussi, juste pour déclarer l'état, nous devons créer un constructeur, ajouter un super appel à l'intérieur de celui-ci et ensuite nous pouvons déclarer l'état.
Ce n'est pas seulement encombrant mais rend également le code non nécessairement compliqué.
À mesure que le nombre de gestionnaires d'événements augmente, le nombre d'appels .bind augmente également. Nous pouvons arrêter de le faire en utilisant la syntaxe des propriétés de la classe.

L'application create-react-app dispose déjà d'un support intégré. Vous pourriez ne pas savoir à ce sujet.

Explorons donc en détail.

La syntaxe des propriétés de classe nous permet de lier les propriétés telles que les variables d'état ou d'instance directement à l'intérieur de la classe sans avoir besoin de constructeur.

Comme vous le savez, les fonctions fléchées n’ont pas leur propre contexte. Il prend la cette contexte d'où la fonction est placée. Ainsi, nous pouvons convertir les gestionnaires d'événements en syntaxe de fonction de flèche qui utilisera le contexte de classe, ce qui éliminera le besoin de liaison cette.

Alors maintenant, réécrivez l'exemple de compteur ci-dessus en utilisant cette nouvelle syntaxe

Démo en direct: https://codesandbox.io/s/twilight-sea-lnk6z

Comme vous pouvez le constater, nous avons déplacé la déclaration d'état du constructeur vers directement à l'intérieur de la classe, ce qui rend l'état en tant que propriété de la classe.
Nous avons également converti le gestionnaire d’événements handleAddOne de syntaxe de fonction à syntaxe de fonction de flèche.
donc la fonction préservera la cette le contexte. Donc, à la fin, nous avons complètement éliminé la nécessité d’ajouter un constructeur, ce qui rendra notre code propre et plus facile à comprendre.

Cela ne se limite pas aux gestionnaires d’événements, vous pouvez convertir n’importe quelle fonction définie dans le composant en fonction de flèche pour éviter la liaison de cette.

L'utilisation de la syntaxe des propriétés de la classe est un nouveau standard dans le monde réel et tout le monde l'utilise activement.

Installation:

1. La commande create-react-app dispose d'un support intégré pour vous permettre d'utiliser directement cette nouvelle syntaxe sans configuration.

2. Si vous utilisez votre propre configuration webpack et que vous utilisez babel version 7, ajoutez un support pour la syntaxe des propriétés de classe à l'aide de

npm installer --save-dev @ babel / plugin-proposition-classe-propriétés

Ajoutez aussi, @ babel / plugin-proposition-classe-propriete

dans le fichier .babelrc comme indiqué ci-dessous

{
"plugins": ["@babel/plugin-proposal-class-properties"]
}

Et vous êtes prêt à travailler avec cette nouvelle syntaxe

3. Si vous utilisez votre propre configuration webpack et que vous utilisez une version de babel inférieure à 7, installez-la à l'aide de

npm install --save-dev babel-plugin-transform-class-properties

Ajoutez aussi, propriétés de classe de transformation

dans le fichier .babelrc comme indiqué ci-dessous

{
"plugins": ["transform-class-properties"]
}

C'est tout pour aujourd'hui. J'espère que vous avez appris quelque chose de nouveau aujourd'hui.

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer