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 :
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.
0
Questions, réponses et commentaires