Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Ajouter des méthodes à un composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Un composant peut avoir des méthodes dites statiques, que vous pourrez appeler partout. Il s'agit d'une pratique intéressante pour ajouter des utilitaires à vos composants.
04:12

Transcription

On va maintenant parler des méthodes static. J'en ai pas encore parlé réellement parce que les méthodes statics, c'est quelque chose d'un petit peu avancé c'est vrai qu'on ne va pas tout le temps les utiliser. Voila à quoi ça pourrait nous servir. Mais ça ne va pas servir qu'à ça évidemment, vous allez pouvoir utiliser les méthodes statics pour un peu tout et n'importe quoi en fonction des besoins. Faut juste savoir que ça existe. Quand un composant est instancié, on n'a plus vraiment de possibilité de travailler en dehors. On ne peut pas récupérer des choses de ce composant, faut vraiment être dans un cadre React pour récupérer. Si j'ai besoin d'avoir des données qui sont static et que je veux réutiliser en dehors ou que je veux réutiliser ailleurs, je peux le faire très simplement et je vais vous faire un petit exemple. D'abord il faut définir une méthode static. Donc on va définir ici static, et moi je vais faire un GetData. Je vais récupérer des données qui seront des données de base et mes données de base, je vais les utiliser dans mon composant mais je vais pouvoir aussi les utiliser et les récupérer ailleurs. Ça peut me servir à tout et n'importe quoi, je peux en avoir besoin. Faut savoir que ces méthodes statics vont être disponibles dès qu'on créé la classe et pas forcément à l'instanciation de React ou au Render, ect... Cela va dépendre de la classe et on peut les utiliser en extérieur, à l'intérieur faire un peu ce qu'on veut. Voilà comment ça marche. On va prendre tout ce state là, qui sont des données de base, on va les placer ici, avec un return. Je vais les mettre là, comme ça. Maintenant, je vais pouvoir utiliser cette static GetData qui provient de ma classe MainComponent, là où j'en ai besoin. Où en ai-je besoin dans un premier temps ? J'en ai besoin sur le State donc je vais venir coller MainComponent point GetData. Ce qui fait qu'à l'instanciation mon State va correspondre exactement à ma static c'est-à-dire cette donnée-là donc des données de base. Ce qui est bien c'est que ces données de base dans le GetData ne vont jamais changer. Ce sont mes données de base. Si j'ai envie de faire un reset à un moment je peux redire que le State ça va être ça et rien d'autre et je reviens à un comportement de base, je vide toute la liste ect... Je peux travailler sur des états aussi un peu plus avancés. Si je fais ça maintenant et que j'enregistre, je pense bien à repasser en Babel. On enregistre, on repasse sur notre navigateur, et on recharge. Qu'est-ce qui va se passer ? Rien ! C'est-à-dire que concrètement on a le même fonctionnement. Il n'y a pas de souci on peut choisir, on peut ajouter des tâches, on peut faire à peu près ce qu'on veut, ça ne change pas. Quand je recharge ma page évidemment, je reviens à un état classique. Maintenant, ce qui est très intéressant avec cette pratique-là, c'est qu'on va pouvoir, très simplement utiliser ces datas-là, qu'on vient en fait de mettre ici, dans une static à l'extérieur. Et je vais vous montrer, c'est-à-dire que je peux tout à fait, sans aucun problème ici, faire un petit console.log à l'extérieur de ma classe, je ne suis plus dans ma classe je suis vraiment à l'extérieur, et lui demander MainComponent.GetData. Ce qui fait qu'une librairie Javascript externe ou autre pourrait récupérer ces datas pour faire quelque chose. On peut définir en fait des données par défaut qui vont se trouver dans un composant et qu'on va vouloir réutiliser ailleurs. On peut aussi imaginer les réutilser directement dans un composant enfant parce qu'on en a besoin. Et là, c'est la même chose, on ira les chercher par la static sur la classe MainComponent qui en fait ne dépend pas d'un rendu react qui va vraiment être disponible tout le temps. Donc ici, je repasse en Babel encore une fois et je vais tester. Effectivement, en console vous allez voir que je vais bien avoir mon console.log qui s'effectue. Donc j'ai bien, vous voyez, mes données, sans aucun problème, et je peux toujours travailler avec mon composant qui a été compilé et qui dispose d'un state qui est exactement le même que ce que j'ai eu en console.log. Donc, les statics sont très importantes, vous permettent de déployer sur des composants des propriétés que vous allez utiliser ailleurs et que vous pourrez, ici, fixer. Alors pensez-y, ça peut vous servir à faire des calculs, ça peut vous servir à mettre des utilitaires sur une classe particulière. Vous pourriez vous créer une classe utilitaires sachant que quand vous l'appelez, vous pouvez passer des paramètres sans aucun problème. Donc toute votre logique un petit peu compliquée qui n'est pas de la logique dynamique, qui n'est pas du setState ou autre, pensez à la mettre directement dans des statics. C'est comme ça qu'on va pouvoir avoir de la logique métier et des fonctions pas vraiment dynamiques, qui ne vont pas modifier le comportement d'un composant mais qui vont nous permettre de travailler avec le composant.

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 !