Découvrir les réactifs avec KendoReact

Les crochets React sont disponibles depuis la version 16.8 de React. Nous allons apprendre comment appliquer ces crochets en utilisant nos composants KendoReact.

Avec la sortie de Hooks, la création d'applications dans React et la gestion de l'état local de ses composants sont désormais plus simples, plus simples et plus concises. Il y a beaucoup de choses à savoir sur les crochets d'un point de vue conceptuel, et nous avons beaucoup d'articles sur le blog de Progress Telerik pour vous aider à vous familiariser avec eux – j'en ai cité quelques-uns ci-dessous. Dans cet article, nous allons en apprendre davantage sur Hooks et sur la façon de les appliquer à l'aide de composants de KendoReact .

Les applications de construction de React n'ont pas toujours été un jeu d'enfant – avant Hooks, il y avait beaucoup de choses à savoir sur plusieurs Les modèles et les pratiques de React se limitent à la gestion quotidienne des états, la séparation de la logique au sein de vos composants, le partage des méthodes de cycle de vie et autres, etc. Il est nécessaire de comprendre plusieurs techniques telles que Mixins, Composants d'ordre supérieur, et / ou Render Props, quelque chose qui n'est généralement fait qu'avec des classes.

Les développeurs d’avant Before Hooks React, confrontés à des problèmes d’état sans cesse croissants, s’appuyaient sur Redux ou MobX pour gérer leurs données et leur état de communication. Ceci était une utilisation naturelle pour Redux, mais il existe d'autres formes d'état d'application pour lesquelles l'utilisation de Redux pourrait ne pas être un choix aussi judicieux, comme l'état à l'intérieur de composants basés sur une classe qui utiliseraient this.state et setState . setState est une méthode fournie dans React permettant à l'utilisateur de définir et de changer d'état dans le temps. Cette fonctionnalité n’était auparavant disponible que dans les composants de classe, jusqu’à Hooks.

Voici quelques articles de notre blog expliquant plus en détail Hooks:

La documentation de ReactJS.org sur Hooks est également excellente. ressource que vous devriez connaître.

Comme je l’ai déjà dit, les crochets sont parfaits pour traiter certains types d’états d’application. Quelques exemples sont l’état de contrôle, l’état du composant local et l’état de la session. J'aimerais utiliser Hooks lorsque nous travaillons avec nos composants KendoReact, mais je veux commencer simplement. Refactorisons l'une des démos de StackBlitz à partir d'une démo utilisant des classes et basculons-le vers des composants fonctionnels.

Nous rechercherons des cas dans lesquels la démonstration utilise this.state et this.setState car lorsque nous convertissons le composant en fonctionnalité, nous n'avons pas à utiliser le . ] ce mot-clé plus et nous n’aurons plus besoin d’un constructeur ni d’appel setState . Lorsque nous travaillons avec Hooks, nous faisons les choses légèrement différemment. Commençons donc par refactoriser la démo de KendoReact qui montre comment travailler avec notre KendoReact Dialog . J'ai ajouté la démo originale de StackBlitz à partir de la page de présentation du dialogue, ce sera notre point de départ.

Si vous regardez la démonstration main.jsx que je viens de montrer ci-dessous , nous pouvons identifier plusieurs zones cibles qui changeront lors de l’utilisation d’un composant fonctionnel et de crochets à réaction. Le code et les lignes surlignés en VERT devront être modifiés et les lignes surlignées en ROUGE pourront être supprimées complètement.

1. La ligne 6 contient une définition de la classe . Nous devons la convertir en composant fonctionnel.
2. La ligne 7 contient un constructeur, la ligne 8 a appeler à super () et à la ligne 10, nous avons des liaisons. Aucune de celles-ci n'est nécessaire dans notre composant fonctionnel utilisant des crochets.
3. À la ligne 9, nous créons une instance de notre état et lui attribuons une valeur par défaut. valeur de true il s'agira plutôt d'un appel à la fonction useState .
4. Sur la ligne 13, nous devons renommer la fonction toggleDialog et la basculer sur la Syntaxe de style de fonction de flèche ES6, les lignes 14 à 16 appellent simplement une méthode de mise à jour fournie par notre useState () affectation appelée setVisible et la valeur de son référencement sera visible au lieu de this.state.visible .
5. À la ligne 19, nous avons un appel à render () qui ne sera pas nécessaire dans notre composant fonctionnel
6. Les lignes 22, 23, 26 et 27 contiennent des références à this. et this .state qui devra être référencé visible et toggleVisible au lieu de toggleDialog et j'expliquerai plus tard pourquoi je veux renommer cette fonction.

Commençons. La première chose à faire est de convertir la classe en composant fonctionnel, de supprimer le constructeur et d’appeler la fonction super () la liaison de la fonction toggleDialog () . Nous pouvons utiliser plusieurs options de syntaxe ici. Je préfère le style de fonction de flèche ES6:

 const multiply = (x, y) => {return x * y};

Dans notre composant, la ligne 5 ressemblerait maintenant à ceci:

 const DialogWrapper = () => {

Allons de l'avant et mettons en place notre crochet qui remplacera l'objet d'Etat. Au lieu de créer un objet nommé state, nous allons établir un appel à useState () et en déstructurer la valeur de retour en une variable qui contiendra notre état et une méthode update / set pour mettre à jour cet élément d'état. Notre nom de notre état sera visible et sa méthode de mise à jour sera appelée setVisible . Nous allons essentiellement supprimer le constructeur entier et le remplacer par cette ligne:

 const [visible, setVisible] = useState (true);

Puisque nous utilisons le crochet de base useState () nous devons également l'importer. Notre importation React va maintenant ressembler à:

 import React, {useState} de 'react'; 

Ensuite, nous avons besoin d’une fonction dans ce composant qui traitera l’appel setVisible aux fins de basculer sa valeur. Nous avons décidé de l'appeler toggleVisible au lieu de toggleDialog et, comme nous sommes dans un composant fonctionnel, la syntaxe utilisée auparavant ne fonctionnera pas. Pour cette raison, je vais le mettre à jour avec le style de fonction de flèche ES6.

Cette fonction définira simplement l'état visible sur l'opposé de son état actuel à l'époque. En coulisse, React gère cette variable visible de la même manière que si vous appeliez setState dans un composant de classe. Cette gestion est juste en train d’être résumée par quelque chose en coulisse appelé useReducer mais nous n’allons pas entrer dans les détails de la façon dont tout cela fonctionne dans cet exemple simple. Notre nouveau code ressemble à ceci:

 const DialogWrapper = () => {;
  const [visible, setVisible] = useState (true);
  const toggleVisible = () => setVisible (! visible);

Maintenant, nous devons nous débarrasser du bloc render () et de ses deux accolades. Nous devons également supprimer toutes les références à this.toggleDialog et this.state.visible et les remplacer par toggleVisible et visible . en conséquence. Maintenant, dans notre return () nous aurons les modifications suivantes:

 return (
  

   Dialogue ouvert 
  {visible && 

    
 Êtes-vous sûr de vouloir continuer? 
    
     Non 
     Oui 
    
  
}
  
)

Encore une fois, nous venons de mettre à jour notre code dans la déclaration () afin de ne pas faire référence au mot-clé this et d'utiliser notre nouveau nom de fonction toggleVisible . [19659002] Ce sont tous les changements qui doivent être faits. Nous avons réussi à convertir notre démonstration KendoReact pour utiliser un composant fonctionnel et le crochet de base useState . Jetons un coup d'œil à nos modifications globales en utilisant un outil génial appelé GitHistory:

Ce que j'ai fait ici est téléchargé la démonstration originale basée sur la classe StackBlitz dans son propre dépôt Git. La version basée sur la classe serait le commit initial, puis j'ai refait un commit après avoir modifié le style de hook fonctionnel que nous avons créé. GitHistory me donne la possibilité de parcourir ces commits et de voir de façon animée comment notre fichier main.jsx a changé au cours de ces deux commits. Je pense que c'est un visuel puissant pour quelqu'un qui apprend à utiliser Hooks et à voir le changement de l'ancienne approche basée sur les classes à l'approche basée sur les fonctions.

J'ai aussi fait suivre ce dépôt à mon compte GitHub où vous pouvez l'afficher vous-même avec GitHistory . GitHistory (créé par Rodrigo Pombo ) est un plugin très cool qui vous permet de modifier n’importe quel fichier de votre dépôt et de parcourir les commits et de voir comment le fichier a changé au fil du temps. manière très visuelle.

C’est un endroit formidable pour s’arrêter. Nous avons appris ce qu'il faut pour convertir un composant de classe avec un objet d'état simple en un composant fonctionnel à l'aide d'un hook. Dans la prochaine partie de cette série de blogs, nous approfondirons la configuration de plusieurs composants de KendoReact qui possèdent des crochets plus fondamentaux, ainsi que des crochets avancés comme useReducer et récupérons nos crochets. compétences un peu plus loin.