Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de React.js

Comprendre les cycles

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez le système de cycle sur un composant React. Il s'agit d'une bonne pratique pour monter des comportements facilement.
05:35

Transcription

On a vu comment on va utiliser un composant, c’est-à-dire que maintenant vous avez assez de maîtrise pour comprendre l’utilisation d’un composant, comment on câble des événements, etc. mais vous n'avez pas vu réellement le cycle de vie d’un composant et ça c’est extrêmement important parce que c’est l’étape d’après qui va vous permettre de travailler avec un composant. Il faut savoir que, comme dans tout Framework, vous avez possibilité sur un composant, qui effectivement va être un objet, de venir se « plugger » sur le moteur de rendu de React qui, lui, va soulever des événements à chaque fois qu’il va se passer quelque chose. Je vous ai fait un ajout de chaque événement possible pour un composant et je vous ai mis un commentaire au-dessus. On va pouvoir en discuter puisque je vais vous expliquer comment ça fonctionne. Vous pouvez retrouver tout ça sur la documentation de React mais ce sera en anglais et il faudra comprendre ce qui se dit. Je vais quand même essayer d’étayer un maximum pour que vous puissiez comprendre comment ça fonctionne et, surtout, à quoi ça va nous servir. Voilà ce qu’on a : « componentWillMount », « componentDidMount », « componentWillReceiveProps », « shouldComponentUpdate », « componentWillUpdate », « componentDidUpdate » et « componentWillUnmount ». Enfin on a aussi le constructeur, même si ce n’est pas de l’événementiel, c’est quand même le point de départ de tout. Normalement le constructeur part en premier, quand un composant va être rendu par le moteur et ensuite on a le « WillMount » et le « DidMount » qui se lancent et les autres vont interagir en fonction des rechargements de données. Petite précision : vous voyez de la coloration syntaxique dans mon écran. J’ai ajouté ici, plutôt que « text Babel JavaScript », j’ai mis JavaScript ici. Pensez bien à mettre Babel et à enregistrer, comme ça, si vous voulez que ça fonctionne. C'est le moteur de rendu de Babel qui va compiler en fonction du script Babel qu’il va trouver sur la page. Vous pouvez ajouter JavaScript si vous voulez de la coloration. Pour l'exemple, c’était pas trop mal parce que c’est vrai qu’il y a quand même beaucoup d’informations. Sinon, vous pouvez coder en Babel, ce n’est pas embêtant. Si c’est bien indenté, vous vous y retrouverez facilement. On voit bien, quand j’ai rechargé mon composant, j’ai le constructeur qui part, j’ai « WillMount » et « DidMount » et, à partir de là, rien ne se passe. En revanche, si je tape quelque chose, on a : « shouldComponentUpdate » qui part, « componentWillUpdate », « componentDidUpdate ». Enfin si j’ajoute, on a encore un : « componentWillReceiveProps », « shouldComponentUpdate », « componentWillUpdate », « componentDidUpdate ». Vous voyez que ce cycle de vie intervient quasiment tout le temps. Que se passe-t-il réellement et à quoi ça va nous servir ? Le premier, « componentWillMount » c’est avant le rendu donc vous pouvez faire un « setState », ça va écraser le « state » de base du constructeur. Le constructeur définit un « state » et vous pouvez refaire un « setState », ça peut être intéressant si vous avez quelque chose à ré-écraser ou à modifier. Après le rendu, on va accéder aux « refs ». C’est très important, ça veut dire que le composant a été rendu dans l’interface et vous avez accès à toutes les « refs » que vous avez définies. C’est à cet endroit-là que vous travaillerez sur les « refs », si besoin. « ComponentWillReceiveProps » intervient à la mise à jour des « props ». Quand vous passez des propriétés des « props » à un composant, ou vous faites un « setState », par exemple, ça va se lancer. Attention, parce que celui-ci va démarrer un rendu au travers du moteur de rendu donc il va rafraîchir le composant. Sachez que c’est très important. On peut ici faire un « setState », sans avoir besoin d’un rendu supplémentaire. Si vous refaites un « setState », vous allez ravoir une phase de rendu donc cet événement-là vous permet de faire également un « setState » comme ça vous évitez d’avoir deux rendus, vous n'en aurez qu’un seul. Le « shouldComponentUpdate » va donner l’information à React s’il doit ou pas faire le rendu, le rendu final donc recompiler la vue pour vous l’afficher. Si vous faites un « return false », le seul où on peut faire ça, gardez bien ça en tête, si vous faites un « return false » il ne lancera pas les deux événements suivants, « WillUpdate », « DidUpdate ». Cela peut être intéressant, notamment quand on a beaucoup de composants imbriqués. On a peut-être envie d’en mettre à jour qu’un seul, ou un autre ou on veut tester des choses, vous pouvez mettre de la logique là-dedans, vérifier, faire un « return true » ou un « return false ». De base, c'est forcément « return true » et si vous voulez bloquer le rechargement, le « return false » vous permettra d’éviter d’avoir des rendus obsolètes qui ne servent à rien. Le « componentWillUpdate » interviendra avant la mise à jour du rendu concrètement on a la mise à jour, on a le rendu qui va partir, on peut préparer des choses à cet endroit-là et ensuite, une fois qu’on aurait préparé, on va aller sur « componentDidUpdate ». Attention, le « componentDidUpdate » est le seul endroit, le seul événement dans lequel vous accédez au DOM qui a été rafraîchi. Tous les éléments du DOM, si vous avez besoin de travailler dessus, seront dans « componentDidUpdate ». Le composant est rendu, le composant est disponible et, surtout, le DOM est disponible. Enfin, on a le dernier qui est « componentWillUnmount ». S'il vous arrive à un moment ou à un autre d’avoir à détruire un composant, un composant qui serait une « pop-in » que vous avez affichée avec des informations dedans. Si vous avez besoin de faire des nettoyages, supprimer des variables, faire des « reset » de « timer », vous le ferez dans « componentWillUnmount ». C’est un événement qui sera lancé directement après le démontage, quand un composant n’est plus disponible. Voilà, on a fait un peu le tour. Vous remarquez que ça donne beaucoup de possibilités, il faut essayer de les utiliser avec parcimonie mais ce sont des points d’accroche qui permettent d’avoir du comportement. En plus, on peut travailler sur l’événementiel.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !