Formation « Créer des blocs avec Gutenberg »

Déstructurer les props pour améliorer le code

Lecture : 3 minutes • 2

Il est parfois redondant de toujours commencer ses valeurs et fonctions par props ou props.attributes. On va alors voir comment simplifier notre code grâce à l’assignation déstructurée de ESNext.

Vous en avez marre de toujours taper props.setAttributes() et props.attributes.maValeur dans votre code ? C’est vrai qu’on commence à en avoir pas mal écrit au cours de cette formation, mais heureusement on va maintenant optimiser tout ceci !

Rappel : L’assignation destructurée

Pour cela on va utiliser l’assignation déstructurée, que l’on a vue dans le cours sur les notions ESNext et React :

JSX

Si je reformule en français ce code j’obtiens : « je veux extraire number, title et radius de props.attributes afin de les utiliser en tant que variables autonomes ».

Le but de cette assignation est aussi de ne garder que ce que l’on a réellement besoin d’utiliser et de simplifier l’écriture de notre code.

Déstructurer les props

On va déstructurer les props fournies dans edit et dans save, et on va voir que l’on n’a pas besoin des mêmes valeurs dans l’un et l’autre.

Je reprend l’exemple du cours précédent, que j’ai nommé cette fois src/13-destructuration :

JSX
src/13-destructuration/save.js

Dans la méthode save, on veut récupérer tous nos attributs.

Le but est d’éviter de les appeler à chaque fois props.attributes.monAttribut et simplement utiliser monAttribut (qui peut-être dans cet exemple number, title, chapterSign…).

Je regarde maintenant sur l’assignation du edit : on cherche à extraire les fonctions utilisées comme setAttributesclassName (la classe du bloc) et isSelected (en réalité pas utiles ici, il ne sont là que pour l’exemple).

Mais on veut également extraire les attributs de props. On pourrait du coup le faire en deux fois avec une nouvelle ligne :

JSX
src/13-destructuration/edit.js

Sinon on peut le faire en une seule ligne en créant un sous-objet attributes :

JSX
src/13-destructuration/edit.js

Du coup désormais il suffit d’écrire setAttributes() au lieu de props.setAttributes()et radius au lieu de props.attributes.radius. Propre non ?

Vous noterez qu’en général je n’ai besoin d’envoyer que les attributs dans le save, et pas les fonctions comme setAttributes ou isSelected qui n’ont une utilité que dans edit.

Déstructurer à la source

Une dernière chose, mais là c’est vraiment pour aller au bout du délire. On peut faire l’assignation directement lorsque les props sont passées en paramètre du edit ou du save.

JSX

Là on dit clairement que, des props, je ne veux conserver que cette sélection : pas la peine de m’envoyer le reste. Du coup dans le code on ne voit plus aucune mention à ces props. Ca peut être déroutant au début.

C’est par contre une écriture qui peut s’avérer très vite lourde, à utiliser donc avec des pincettes.

Conseil

À vous de choisir l’écriture qui vous plait le mieux. Aucune n’est mauvaise. Optez donc pour celle qui vous parait la plus claire. l’essentiel étant que vous vous y retrouviez dans votre code !

Personnellement j’aime bien parfois garder la notation originale, quitte à retaper props à chaque fois, ça me rappelle que l’élément vient du parent (dans notre cas, Gutenberg).


Cette technique est largement utilisée par les développeurs JS. Elle va d’ailleurs nous être utile dans le cours suivant où on va scinder notre code en plusieurs sous-composants.

On fera appel à cette écriture pour éviter de passer toutes les props à chaque sous-composant, et juste ce dont il a besoin, par mesure de performances.

2

Questions, réponses et commentaires

  1. Adam Refined

    Le 12 août 2023

    Hello, j’ai fait les formations sur les themes WP et l’ACF… j’ai bien entamé celle sur Gutenberg… Il ne manque plus que la formation sur les Plugins (qui n’existe pas chez toi). Je sais, j’en demande trop pour du gratuit. Mais c’est aussi pour souligner que ta formation aurait très bien pu être payante tellement elle est bien faite :).

    1. Maxime BJ

      Le 12 août 2023

      Bravo pour ta progression. J’ai plein d’idées de formation mais hélas j’ai d’autres projets pour le moment. Celle-ci été payante à l’époque en réalité ! J’ai tout passé en gratuit lorsque j’ai vu que je n’aurais plus le temps de m’occuper à temps plein du site. Peut-être qu’un jour…

Laisser un commentaire