02
oct.
2016
A la découverte de ReactJS

A la découverte de ReactJS

Si vous me suivez sur Twitter, vous avez surement remarqué que je poste de plus en plus de liens en relation avec ReactJS.

Laissez-moi vous guider et découvrir ce qui se cache sous ce drÎle de nom.

ReactJS est une bibliothÚque pour créer des interfaces utilisateurs. Cela peut vous paraßtre super pompeux comme ça, mais c'est pourtant dans ce domaine qu'il excelle.

Nous n'avons pas Ă  faire ici Ă  un framework complet comme l'est Angular par exemple. Par ailleurs, je ne rentrerais pas dans le dĂ©bat (qui commence Ă  faire long feu) qui compare ReactJS Ă  Angular. Chacuns a ses avantages et ses inconvĂ©nients, et ils ne remplissent pas les mĂȘmes besoins.

Maintenant que la potentielle flame war est Ă©teinte, revenons Ă  ReactJS.

React est donc une bibliothĂšque JS dĂ©veloppĂ©e par Facebook, qui a pas mal le vent en poupe ces derniers temps, et est utilisĂ©e par les grands de ce monde. Jugez plutĂŽt par vous mĂȘme :

  • Apple (developer portal)
  • AirBNB,
  • Netflix
  • BBC (module de recherche)
  • Yahoo Mail
  • Reddit Mobile
  • Dropbox, Facebook, Github, IG, Wired
  • Wordpress
  • et Winamax (il faut bien se faire un peu d'auto promo ;))

Facebook l'utilise depuis 2011 en interne et l'a appliqué massivement pendant la refonte d'Instagram (suite à son rachat) Autant dire qu'en développant et utilisant son propre outil depuis ces quelques années, React a déjà gagné ses lettres de noblesse.

Parlons maintenant un peu de ce qu'est réellement React.

En simplifiant, on pourrait dire que React ne s'occupe que du V de MVC. Ainsi, React n'a ni Controllers, ni Directive, ni Templates et encore moins de Global event listener. En fait, React n'a que des composants. Et d'ailleurs, il est dans la logique des choses de faire des composants qui réutilisent d'autres composants. Comme ça, vous découpez au maximum vos interfaces, et pouvez réutiliser les parties codées.

Pas de template donc, juste un assemblage de composants.

D'ailleurs, voici Ă  quoi ressemble un composant bĂȘte et mĂ©chant en React :

Un composant est donc une classe qui doit Ă  minima possĂ©der une mĂ©thode render() C'est cette mĂ©thode render qui s'occupera du rendu de votre composant. Bien entendu, cette classe peut ĂȘtre enrichie de bien d'autres mĂ©thodes, propre Ă  votre code ou bien propre Ă  React.

Petit apparté au passage : Il est possible de faire du React de plusieurs maniÚres. Soit vous codez en ES5, et dans ce cas là, vous n'avez pas vraiment de classe en JS, soit vous vous simplifiez la vie, et vous passez directement en ES6 pour avoir un support des classes en JS. Pour ma part, j'ai goûté à l'ES6, et autant que possible, je ne retournerais pas en ES5. Fin de l’aparté.

Donc je vous disais plus haut : faites des composants et assemblez-les. Encapsulez-les mĂȘme. Voici un exemple rapide :

Et là, je vois déjà les puristes qui s'affolent au fond. Du HTML dans le code. Oh My God.

J'avoue que la syntaxe peut paraßtre déroutante au début, mais si vous mettez ça de cÎté au début, vous y prendrez vite goût.

Par ailleurs, autant les premiers composants utilisaient du vĂ©ritable HTML, autant le composite lui utilise des "balises" qui n'existent pas. C'est lĂ  la syntaxe de ReactJS : le JSX. Tout est balise et attribut. Ainsi vous vous y retrouverez beaucoup plus facilement dans votre code, croyez-moi. Ainsi, vous avez l'impression d'Ă©crire du HTML, mais au final, React transforme tout ça pour pouvoir le manipuler de maniĂšre optimale. MĂȘme les H1/H2 du dĂ©but ne seront pas rendus comme de vrais noeud HTML. Nous y reviendrons plus tard.

Bon vous allez me dire : "c'est bien beau tout ça, mais écrire tout ça pour faire une juste un Hello World statique c'est too much"

Et vous auriez raison.

React est trÚs doué pour gérer les mises à jour de rendus. Donc autant lui passer des variables !

C'est lĂ  qu'intervient la notion de "props" (Rien Ă  voir avec le Monsieur du presque mĂȘme nom)

Les props, ce sont les properties que l'ont peut passer Ă  un composant.

Ici, on passe donc l'attribut "name" au composant HelloWorld, avec la valeur "Dan". On récupÚre ainsi cette valeur dans le composant, via un accÚs par "this.props.name". Simple non ?

Si vous avez bien suivi la logique, vous aurez remarqué que le passage d'information ne se fait que dans un sens, du composant parent vers le composant enfant. JAMAIS dans l'autre sens. Les props sont ce que l'on appelle "immutable", en gros, en lecture seule.

Si vous souhaitez modifier une valeur au sein d'un composant, il faut faire appel au "state" de ce composant. Nous y reviendrons plus tard.

Maintenant que nous savons passer des paramÚtres à nos composants, cela implique que ces paramÚtres peuvent changer. Et s'ils changent, il faut remettre à jour votre vue. C'est là que la magie de React intervient : vos composants exécutent automatiquement la méthode render() à chaque fois qu'une de leur props est modifiée.

Et lĂ , je revois les mĂȘmes puristes du fond de la salle qui font de gros yeux.

Faire un render Ă  chaque update, c'est Ă©crouler les performances.

Et bien c'est vrai ! Profitons-en pour rappeler quelques best practices quand on parle du DOM :

  • On n'effectue pas de grosses opĂ©rations sur le DOM
  • On limite les accĂšs au DOM, on ne se sert pas du DOM pour lire des valeurs
  • On modifie des Ă©lĂ©ments avant de les ajouter au DOM

ConcrĂštement, faire un render() Ă  chaque fois va Ă  l'encontre de toutes ces best practices

Ok, donc, à ce moment là, vous vous dites que je vous vends un truc qui n'en vaut pas le coup. Restez assis, vous ne serez pas déçus ;)

React utilise et gĂšre ce que l'on appelle un Virtual DOM. En fait, il s'agit d'un DOM allĂ©gĂ© (pour ĂȘtre belle en maillot cet Ă©tĂ©) gĂ©rĂ© de maniĂšre transparente par React. C'est sur ce Virtual DOM que les opĂ©rations de render sont effectuĂ©es. Ainsi, React est en mesure de comparer efficacement l'ancienne et la nouvelle version, et ainsi dĂ©terminer les modifications Ă  apporter au vĂ©ritable DOM. Une fois ces modifications Ă©tablies, il suffit de les appliquer en une fois au vĂ©ritable DOM. On met donc Ă  jour uniquement ce qui doit l'ĂȘtre. Un composant voit ses props modifiĂ©es ? Si son DOM n'est pas changĂ©, il ne sera pas mis Ă  jour sur votre page. Vous gagnez ainsi en performance.

Je vous avait dit que ça valait le coup de rester non ? ;)

Puisque l'on est dans l'optimisation, sachez que chaque composant React est soumis à un cycle de vie bien défini, dont voici les points clés :

  • componentWillMount() : le composant va ĂȘtre injectĂ© dans le DOM
  • componentDidMount() : le composant a Ă©tĂ© injectĂ© dans le DOM
  • componentWillReceiveProps(newProps) : le composant va recevoir de nouvelles props. Charge Ă  vous d'en faire quelque chose si vous le souhaitez
  • shouldComponentUpdate(newProps) : DĂ©termine si l'on doit faire un render() sur le composant. Utile si seules quelques props dĂ©termine le redessinage du composant. Il est ainsi possible de court-circuiter le rendu, et gagner un peu plus en performance.
  • componentWillUpdate() : appelĂ© quand le composant va ĂȘtre mis Ă  jour
  • componentDidUpdate() : appelĂ© quand le composant a Ă©tĂ© mis Ă  jour
  • componentWillUnmount() : appelĂ© quand le composant va ĂȘtre retirĂ© du DOM

GrĂące Ă  chacun de ces Ă©vĂ©nements, vous pouvez donc interagir plus finement sur vos composants. Le point clĂ© ici est le shouldComponentUpdate : il vous permettra de gagner Ă©normĂ©ment de performance en stoppant le rendu. Sachez que si vous bloquez le re-rendu d'un composant qui en comporte lui mĂȘme d'autres, les composants enfants ne seront pas re-rendus Ă©galement.

Enemy of the state

Vous vous souvenez, tout Ă  l'heure, je vous parlais du "state" du composant, par opposition aux props. Le state est "mutable", ce qui veut dire que l'on peut le modifier, par opposition aux props, qui sont "immutable"

En gros, on peut dire qu'un composant parent peut modifier son state (suite Ă  un clic par exemple) et que ce mĂȘme state sera passĂ© en props Ă  son/ses enfant(s) Ainsi, le composant enfant recevra de nouvelles props au changement du state parent, et dĂ©clenchera (ou pas) un nouveau rendu.

Ce n'est pas clair ? Regardez-l'exemple ci dessous :)

Ici, on instancie un timer qui, toutes les secondes, va mettre à jour le state du composant. Le state est initialisé via la méthode getInitialState (ou alors dans un constructeur), et chaque tick met à jour le state. L'affichage est alors redessiné, vu que le Virtual DOM a changé.

C'est déjà plus clair non ?

Allez ça sera tout pour cette fois. La prochaine fois, nous verrons Redux, un des fidÚles compagnons de ReactJS !

PostĂ© par Mathieu LESNIAK Ă  16:52 dans la catĂ©gorie Développement
Tag(s) associé(s) :
Partager cet article :
Fabio
Fabio
04/02/2017 15:58:29
Merci !
lorent
06/03/2017 21:30:40
Bonjour!
J'ai lus et relus l'article et il m'a vraiment plu car il est très intéressant!
Merci!

Ajouter un commentaire




Les champs obligatoires sont marqués d'une *

A table !



Derniers commentaires