Comment utiliser les crochets de réaction basiques pour l'état et les effets

Avec React Conf 2018 derrière nous, nous avons appris qu'avec la version 16.7 de React, une nouvelle fonctionnalité importante sera disponible: React Hooks. Rejoignez-moi alors que nous passons en revue des exemples concrets et que nous devenons "accrochés" à React.

Nous observons React devenir de plus en plus d'opinion et, avec les dernières fonctionnalités, j'oserais dire qu'il devient plus un cadre que jamais. React est généralement connu pour être moins un framework complet, mais plutôt une bibliothèque qui vous permet de restituer DOM et de gérer son état très bien. L’écosystème contient quelques outils qui font l’objet d’une opinion et qui sont encore largement utilisés en standard dans de nombreuses applications React, comme Redux par exemple. Les crochets ne sont pas des Redux, mais une solution alternative pour ceux qui ont récemment découvert Redux, qui utilise le modèle de flux comme condition requise pour chaque application à l'état de mange.

Je crois que les crochets sont un pont vers Redux. mais aussi un moyen de gérer un état simple sans introduire Redux. Il est tout à fait logique que Dan Abramov soit celui qui nous a montré notre premier exemple de travail lors de React Conf 2018, car il est également le créateur et le principal contributeur de Redux . Je pense que cela donne une certaine crédibilité à l'utilisation de Hooks et indique qu'ils réfléchissent à une meilleure gestion de l'état dans React et à la manière de s'assurer que Hooks complète et utilise en priorité Redux.

l'introduction de choses comme le fractionnement du code, le suspense, la paresse, le mémo et maintenant les points d'ancrage, je pense que les changements observés en 2018 sont apportés avec le développeur et les performances en tête. La concurrence avec d'autres cadres devient également une réalité. Je crois que cet environnement concurrentiel est ce qui oblige React à devenir un cadre plus léger. Et si nous souhaitons voir React plus optimiste avec des fonctionnalités similaires à celles d'un framework, je suis vraiment heureux de la manière dont l'équipe de React réagit à ces derniers ajouts à l'API. J'ai demandé à quelques personnes si elles pensaient que React devenait un cadre, quelques-unes ont répondu par l'affirmative, une personne vient de soupirer et une autre a répondu: jusqu'à ce qu'elles intègrent le routeur à React, je ne le considère pas comme un cadre.

Hooks pour la victoire

Avec React Conf 2018 derrière nous, nous avons appris qu'avec la version 16.7, une nouvelle fonctionnalité sera disponible: React Hooks .

Actuellement, vous pouvez lire des informations sur le Hooks afficher le RFC (Request for Comments) et jouer avec la nouvelle fonctionnalité en utilisant: npm install react @ next rea- dom @ next . Les crochets représentent une fonctionnalité strictement additive à React qui introduit pas de changements radicaux ce qui signifie que c'est totalement opt-in. Il offre une alternative à l'écriture de composants basés sur des classes simplement pour utiliser des méthodes d'état et d'accès du cycle de vie.

Parce que Hooks sera implémenté avec une stratégie d'adoption progressive (coexistence avec le code existant) Cela donne aux équipes le temps de refactoriser leur code ou simplement de laisser le code hérité alors qu’elles introduisent de nouveaux composants fonctionnels à l’aide de Hooks. Les crochets ont déjà été surnommés "L'avenir de React", mais il est également noté que les classes seront prises en charge dans un avenir prévisible. Les crochets apportent aux composants fonctionnels ce que nous ne pouvions faire qu'avec les cours. C'est comme être capable de travailler avec l'état les effets et le contexte en particulier

Dans le passé, certains développeurs de React ont connu la confusion quant au moment d'utiliser et de ne pas utiliser les classes. @SophieBits a commenté dans le discours "Réagissez aujourd'hui et demain" que les classes peuvent être " difficiles pour les humains et les machines ." Je pense que nous verrons plus de ce mouvement s'éloigner des classes autant que possible. C'est en fait la bonne chose à faire dans certains cas – la position à ce sujet remonte à plusieurs années avec des discussions telles que: "Comment dormir la nuit en utilisant les classes de réaction", même s'il faut parfois les utiliser dans React actuel . Mais cette question est en cours de traitement et nous voyons déjà des développeurs avoir des opinions bien arrêtées et utiliser principalement des composants fonctionnels quand et où ils le peuvent.

Les crochets donnent l'avantage aux composants fonctionnels dans React. Certains des crochets supplémentaires déjà disponibles dans l'API de React (16.7.0-alpha) incluent: useReducer, useCallback, useMemo, useRef, useImperativeMethods, useMutationEffect, useLayoutEffect, uhh les ai-je tous?

Alors, qu'est-ce que les crochets, comment les utiliser?

La façon la plus simple de décrire les crochets est simplement de vous montrer deux exemples, l'un étant un composant de classe qui doit avoir accès aux méthodes d'état et de cycle de vie et un autre exemple où nous réalisons la même chose avec un composant fonctionnel. J'ai lu la proposition relative à Hooks et c'est pour cette raison que je vais utiliser un exemple de code similaire à celui utilisé par Dan Abramov dans la documentation.

Vous pouvez simplement lire la documentation, et je suggère de le faire. Cependant, je souhaitais vous donner un exemple concret que vous pouvez toucher et ressentir et avec lequel vous pouvez jouer. J'apprends mieux en me salissant les mains. Pour cette raison, je souhaitais fournir les mêmes exemples que ceux illustrés dans la documentation, mais avec une démonstration de StackBlitz pour que vous puissiez le tester vous-même.

Ce GIF ci-dessous montre la différence entre Exemple de classes et de composants fonctionnels que nous verrons dans la section suivante:

Exemple côte à côte de useState

Ci-dessous, nous suivons l'exemple du compteur canonique fourni dans React. docs. Il contient un bouton à l'intérieur d'un composant Counter . Une fois cliqué, il avance d'un état à un autre et met à jour le état.count à des fins de rendu.

Nous allons d'abord voir comment procéder avec un composant de classe utilisant juste setState :

La première chose à noter concernant le composant basé sur les classes est que la syntaxe de classe utilise un constructeur qui référence le mot clé this . À l'intérieur du constructeur, nous avons une propriété state. Nous mettons également à jour le nombre à l'aide de setState () .

Voyons maintenant comment faire la même chose avec les crochets, en utilisant un composant fonctionnel:

Dans l'exemple de composant fonctionnel, nous avons une importation supplémentaire. de useState . Il n'y a plus de syntaxe de classe ni de constructeur, juste un const . Son affectation définit la valeur par défaut et fournit non seulement la propriété count mais également une fonction de modification de cet état appelée setCount . Ce setCount fait référence à une fonction et peut être nommé comme bon vous semble.

La méthode du composant fonctionnel incrementCount est plus facile à lire et référence directement notre valeur d'état au lieu de faire référence à . ] this.state .

Exemple côte à côte de useEffect

Lors de la mise à jour d'un état, des effets secondaires doivent parfois se produire lors de chaque changement. Dans notre exemple de compteur, il peut être nécessaire de mettre à jour la base de données, de modifier le stockage local ou simplement de mettre à jour le titre du document. Dans la documentation, l'équipe de React a choisi ce dernier exemple pour rendre les choses aussi simples à comprendre que possible. Faisons donc cela et mettons à jour nos exemples pour avoir un effet secondaire qui utilise le nouveau crochet useEffect .

Ajoutons cet effet secondaire à notre contre-exemple existant et examinons à nouveau l'ancienne manière de procéder. avec les classes vs travailler avec des crochets. Nous verrons d’abord comment faire cela avec un composant de base basé sur les classes:

Et ensuite, comment faire la même chose avec Hooks:

Maintenant que nous introduisons un comportement supplémentaire, nous commençons à voir encore plus de preuves le passage aux crochets offre un moyen plus simple de gérer les effets secondaires et les états. Ce qui a pris deux méthodes de cycle de vie distinctes dans la composante classe que nous pouvons obtenir en un seul appel à useEffect . Nous avons encore une importation dans l'exemple de composant fonctionnel, mais si nous pouvons supprimer la syntaxe de classe, une méthode de cycle de vie supplémentaire et rendre notre code plus propre et plus lisible, cela en vaut la peine.

Call useState et useEffect autant que vous le souhaitez!

Tout comme avec setState vous pouvez appeler useState autant de fois que vous le souhaitez. Passons à un exemple qui montre une situation légèrement plus compliquée dans laquelle nous avons un nom affiché sur la page, des entrées permettant de modifier le nom, et nous souhaitons contrôler à la fois le prénom et le nom de famille. Nous pouvons créer deux propriétés distinctes, chacune avec sa propre fonction de mise à jour ou définie, et simplement appeler useState sur chacune d'elles afin de définir la valeur par défaut.

Dans le GIF ci-dessous, vous pouvez voir à quoi cela ressemble. comme – ainsi que ce à quoi il ressemble avec une version basée sur les classes, que nous approfondirons un peu plus loin.

Comme on peut s’y attendre, nous avons aussi un fonction de mise à jour pour chaque nom afin que vous puissiez gérer les modifications de manière indépendante.

Voyons le code du composant basé sur la classe:

Et maintenant, la même chose avec Hooks:

Je ne passerai pas tout en revue. les différences à nouveau, mais je voulais que vous voyiez un exemple un peu plus complexe côte à côte. J'espère que vous commencez à voir les avantages de l'utilisation de crochets.

Modifions encore cet exemple et utilisons avec useEffect pour enregistrer notre nom dans le stockage local afin de ne pas perdre notre état lorsque nous actualisons la page.

Voyons le code du composant basé sur les classes:

Et maintenant, la même chose avec Hooks:

Wrap Up

J'espère que ces exemples interactifs vous permettent de comprendre les bases de setState et useEffect . Je prévois de publier d'autres articles sur le sujet React Hooks et de les utiliser avec nos composants KendoReact natifs de React . Si vous êtes nouveau dans React, le blog de Telerik contient plus de contenu, plus précisément autour de All Things React qui contient une pléthore d’informations sur React et son écosystème. S'il vous plaît explorer nos articles et produits et laissez-moi savoir si vous avez des questions ou des idées pour des articles sur des sujets liés à React.

Merci d'avoir pris le temps de lire à propos de React Hooks – vous trouverez ci-dessous des informations supplémentaires sur le sujet que vous trouverez en ligne!

Documentation et articles anciens sur les hameçons:

Les documents React sur les hameçons
Comprendre le sens des crochets à réagir
Comprendre les crochets dans Réagir dans une plongée profonde
Un simple Intor dans les crochets
Tutoriel sur la réaction de 16,7 crochets
Hooked (Formiddable)
Flux sans fuss: Des conteneurs aux crochets

] Ressources vidéo sur les hooks

Réaction de la première journée du forum React Conf 2018

Partage de la logique complexe entre des composants React avec des hooks personnalisés

Accès et modification d'un nœud DOM à l'aide de React useRef et useEffect Hooks

Composants à réaction multiples avec crochets personnalisés

Utiliser le crochet useState React
Tester les composants de réaction qui utilisent des crochets à réaction

Réagir avec une introduction complète

Liste des tâches à afficher avec crochets