Déstructurer les props pour améliorer le code

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 :

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 :

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 setAttributes, className (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 :

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

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.

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.

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.