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

Implémenter une mise à jour double

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le two-way data binding est une pratique courante des frameworks JavaScript. React.js vous propose son implémentation.
03:58

Transcription

Si vous avez déjà entendu parlé d'Angular... vous avez certainement entendu parlé du Two-Way Data Binding. Il permet de placer un écouteur à un endroit donné sur une valeur... qui sera mise à jour partout où elle est appelée. C'est donc un binding complet. Dans notre cas, si on regarde le code qu'on a, il ressemble en général à ceci. On aura un rendu avec ici un onChange sur un champ... une valeur qui correspondra à un message ici this.state.message... et on aura le onChange qui sera câbler sur une variable ou fonction onChange... qui fera un setState. Ce qui est bien, car pour le coup regardez ici... c'est un peu ce qu'on pourrait penser et faire pour réaliser le data binding. Le setState mettra à jour le message, lequel est réutilisé sur l'input. Quand on change un élément ça met à jour le state qui met à jour la valeur. On a ici un Two way data binding. Ce qui est bien c'est qu'on peut facilement à l'intérieur de notre classe.. pas dans le rendu, récupérer la valeur du message car mise à jour tout le temps. C'est pas un problème et c'est simple. Le problème va plutôt se poser si on a trop de champs et effectivement... on se retrouvera avec plein de logiques unitiles, alors que ça peut être facile. Alors, le plug-in Two-Way Binding de React... permet, via ReactLink, de travailler sur les onChange et setState directement. Voilà comment il marche. On va utiliser ici sur la déclaration des Mixins. Les Mixins permettent de définir un plug-in particulier. Ce Mixin s'occupe de rajouter une fonctionnalite directement à React. Là c'est génial car on a qu'à définir un state initial avec un élément dedans. Dans valueLink qu'on aura sur le input qui est nouveau... valuelink n'a pas de base et c'est rajouté par le plug-in... on va pouvoir lui dire linkState sur le message. Donc tu te débrouilles en fait pour faire le linking... et tu mets à jour le state dans le métier de notre classe quand je vais remplir. Voilà comment on peut le faire facilement avec un plug-in de React. Ils ne sont pas bêtes hein et ont compris qu'on avait souvent besoin... de venir ajouter un Two-Way Data Binding pour garder l'état d'une variable. Ils l'ont donc rajouter eux-mêmes et nous ont proposé une solution pour ça. En regardant plus bas dans ce document et il y a une explication ici... comment faire du ReactLink sans utiliser la Mixin? C'est intéressant dans nombreux cas. On peut le faire facilement sans utiliser la Mixin, mais il faudra... définir à la main une variable valueLink avec la valeur et la fonction d'appel. C'est un peu embêtant, car il faudra avoir cette fonction d'appel au-dessus. Cela dit ca peut être une bonne solution pour vous... si vous avez quelque chose à faire pendant l'appel. Car ici ça prend complètement le pas sur toute notre logique métier... c'est-à-dire que ça fera un lien entre le state et une valeur quelque part. Mais on ne peut vraiment travailler sur cette valeur pendant le changement. Si vous voulez néanmoins travailler vous pouvez l'utiliser... et définir vous-même la fonction d'appel qui sera handle pendant le changement. Il y a donc plus de possibilités de l'utiliser de plein de manières. On peut aussi utiliser le ReactLink sans la valueLink. Avec une fonction d'appel et le state se met à jour facilement avec onChange. Vous avez tous les exemples importants de Two-Way Data Binding en une appli. Je vous conseille de lire ce petit document et d'essayer.

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 !