L'essentiel de React.js

Découvrir la rapidité de React.js

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Partez à la découverte du Shadow DOM. Votre formateur vous explique comment React arrive à être aussi rapide.
02:58

Transcription

J’entends souvent dire « React, c’est extrêmement rapide, ça va vite, c’est fort, c’est puissant comme librairie ! ». On va se calmer un petit peu quand même ! C’est vrai, React est très rapide mais il y a une raison derrière. On va simplement ouvrir, comme ça, les « dev tools » et vous pouvez les ouvrir sur les pages de React parce que le site de React est fait en React... et c’est plutôt une bonne chose pour nous ! Mais il faut quand même lever un petit peu le pied : c’est vrai, il y a des techniques qui font que React est très rapide. Cela dit, on peut obtenir la même vitesse avec les autres Framework JavaScript, il suffit simplement de connaître les petites astuces. Il y a des choses qui sont pas toujours mises en avant par les Framework mais si vous regardez sur Internet, vous allez trouver des astuces pour chacun des Framework. Il n’y a pas de rapidité particulière, React n'est pas au-dessus des autres librairies, toutes les librairies sont à peu près les mêmes. Après, c’est vraiment choisir quel est l’outil important pour nous. Si on a besoin que de travailler avec de la vue et qu’on veut aller vite, React est un bon compétiteur dans ce sens-là. Alors, comment c’est possible? Comment React se débrouille pour que ça aille vite ? Ils utilisent le principe du « shadow root ». Concrètement, ils vont utiliser le principe d’un DOM virtuel. Quand vous travaillez avec les librairies JavaScript de base, vous allez faire des appels pour modifier. Imaginons que vous vouliez modifier le titre qui est ici, ce titre-là, il est contenu à l’intérieur d’une « div text », dans une « div wrap », dans une « div hero », etc... Ce qui veut dire que pour agir sur cette balise-là, il va falloir parcourir le DOM pour aller remplacer l’information. Ce que fait React, c’est qu’il va créer un DOM virtuel qui va se placer au-dessus du DOM classique et les données que vous allez mettre dans ce DOM virtuel vont être rafraîchies non pas entièrement, ce qui est généralement le cas avec le DOM classique, il est obligé de parcourir tout le DOM et remplacer une information mais faut faire un rafraîchissement de presque tout le DOM, ce qui fait que c’est extrêmement lourd à gérer pour le navigateur. Là, React va utiliser son DOM virtuel et ne va remplacer l’information qu’à l’endroit où il faut la remplacer sans rafraîchir l’entièreté du document. C’est très intéressant comme technique et ça permet d’obtenir une vitesse d’exécution beaucoup plus intéressante. À contrario, il faut quand même beaucoup de fichiers .js pour réussir cette prouesse donc faut faire un peu attention à ce qu’on vous dit. C’est rapide, c’est vrai qu’il y a quand même un chargement de fichiers JavaScript qui est beaucoup plus important quand on travaille avec React. Vous pourrez regarder tout ça très facilement. Il suffira de prendre le Network comme ça, de trier sur les fichiers JavaScript, de recharger la page. Vous verrez qu’effectivement il y a quand même beaucoup de .js pour obtenir quelque chose de réactif. On a la possibilité de compiler tout ça, on a possibilité de rendre ça plus léger mais vous aurez quand même besoin de certaines informations dans la page pour pouvoir travailler avec React. Donc c’est vrai, c’est très rapide, c’est ce que vous devez retenir, c’est rendu possible grâce à un DOM virtuel. Ce DOM virtuel on en reparlera, on le verra en action, et bien sûr, oui, ça marche bien. C’est évident, c’est du Facebook!

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
Date de parution :27 oct. 2016

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 !