REACT CROCKS: les coupes profondes

Hooks sont des fonctions réutilisables, et des modes de lice, sans être d'écriture Strong> et d'autres fonctions. Les fonctions de crochet nous permettent de "accrocher" le cycle de vie de l'état React à l'aide de composants de fonction, nous permettant de manipuler l'état du composant de fonction sans le convertir en composant de classe.

React a introduit les crochets dans la version 16.8 et a ajouté plus de crochets depuis. Certains crochets sont plus couramment utilisés et populaires que d'autres, tels que use effecte , useState , et useContext . Si vous utilisez React, je crois que vous devez avoir utilisé ces crochets.

Mais ce qui m'intéresse, c'est les crochets React peu connus. Bien que tous les crochets React aient leurs propres fonctionnalités, je veux vraiment vous montrer cinq crochets car ils peuvent ne pas apparaître dans votre travail quotidien - ou peut-être, sachant qu'ils vous donnent des super-pouvoirs supplémentaires.

Catalogue

• userReducer
• useref
• use Impérative Handle 3> <code> userReducer

  UseReducer Hook est un outil de gestion d'état similaire à d'autres crochets. Plus précisément, il s'agit d'une alternative au crochet UseState .

  Si vous utilisez le Hook userReducer pour modifier deux états (ou actions) ou plus, vous n'avez pas besoin de les faire fonctionner séparément. Le crochet suit tous les états et les gère collectivement. En d'autres termes: il gère et renvoie les changements d'état. Contrairement au crochet UseState , userReducer est plus facile lors de la gestion de nombreux états dans des projets complexes.

  Scénario d'utilisation

  userReducer peut aider à réduire la complexité de la gestion de plusieurs états. Il peut être utilisé lorsque vous avez besoin de suivre collectivement plusieurs états, car il vous permet de traiter la gestion de l'État et de rendre la logique des composants comme des préoccupations distinctes.

  Syntaxe

  userReducer accepte trois paramètres, dont l'un est facultatif:

  • Une fonction réductrice
  • InitialState
  • Une fonction d'initiation (facultative)
  CONSTAT [State, Dispatch] Educper (réducteur, instruction initiale, initifonctionnement) // Initialisation à l'aide d'un troisième paramètre facultatif

  Exemple

  L'exemple suivant est une interface contenant une entrée, des compteurs et des boutons de texte contenant un texte. L'interaction avec chaque élément mettra à jour l'état. Notez que userReducer nous permet de définir plusieurs cas à la fois, plutôt que de les définir séparément.

   Importation {userReducer} de 'react'; const reducer = (state, action) = & gt; case 'toggle_color': return {... état, couleur: ! State.color}; par défaut: lancez une nouvelle erreur ();}} fonction application () {const [state, dissatch] = userReducer (réducteur, {count: 0, userInput: '', couleur: false}) => Dispatch ({type: 'user_input', charge utile: e.target.value})} / & gt; <br>  <br>  <p style="{{margin:"> {State.Count} </p> <button onclick="{()" dispatch gt bouton> <bouton onclick="{()"> dissatch ({type:' toggle_color '})} & gt; <br>  <br>  <p style="{{margin:"> {state.UserriNput} </p> -main>); Il s'agit de la puissance qu'il fournit lorsque vous travaillez dans des applications complexes avec plusieurs états.  <h3> <code> useref </code> </h3> <p> <code> useref </code> hook est utilisé pour créer des références sur des éléments pour accéder au DOM. Mais non seulement cela, il renvoie un objet avec l'attribut <code> .current </code>, qui peut être utilisé tout au long de la vie du composant, permettant à la persistance des données sans provoquer de réinstallation. Par conséquent, la valeur <code> useref </code> reste inchangée entre les rendements; </p> <h4> Scénario d'utilisation </h4> <p> Lorsque vous voulez: </p> <ul> <li> Manipulez le DOM avec des informations variables stockées. </li> <li> Accédez aux informations sur les composants des enfants (éléments du cou). </li> <li> Définissez l'accent sur l'élément. </li> </ul> <p> Le crochet <code> useref </code> peut être utilisé. Il est très utile lors du stockage de données variables dans votre application sans provoquer de réinstallation. </p> <h4> Syntaxe </h4> <p> <code> useref </code> n'accepte qu'un paramètre, c'est-à-dire <strong> valeur initiale </strong>. </p> <pre class="brush:php;toolbar:false"> const newRefComponent = useref (initialValue); 

  Exemple

  Ici, j'ai utilisé le useref et useState crochet pour afficher combien de fois l'application réduit l'état de mise à jour en tant que type de texte. p>

   Import './App.css " } const focalRandoMinput = () = & gt; Ajouter un jugement pour empêcher les erreurs de référence null randominput.current.focus ();}} return (<div classname="app"> <h3> div>);} Exporter l'application par défaut;  pre> </h3>
  <p> Notez que la saisie de chaque personnage dans le champ de texte mettra à jour l'état de l'application, mais ne déclenchera pas une réendette complète. </p> <h3> <code> useImperativeHandle </code> </h3> <p> Savez-vous comment les composants enfants accèdent aux fonctionnalités qui leur sont transmises à partir des composants parents? Les composants parents passent ces fonctions à travers des accessoires, mais ce type de passe est dans un sens "unidirectionnel" car le composant parent ne peut pas appeler les fonctions dans le composant enfant. </p> <p> Ensuite, <code> useImperativeHandle </code> permet aux composants parents d'accéder aux fonctions des enfants. </p> <p> Comment cela fonctionne-t-il? </p> <ul> <li> Définissez une fonction dans un composant enfant. </li> <li> Ajoutez une réf dans le composant parent. </li> <li> Nous utilisons <code> ForwardRef </code>, ce qui permet à la réfinée de transmettre aux composants enfants. </li> <li> <code> useImperativeHandle </code> expose les fonctions des composants enfants via la réf. </li> </ul> <h4> Scénario d'utilisation </h4> <p> <code> useImperativeHandle </code> fonctionne bien lorsque vous souhaitez que le composant parent soit affecté par les modifications du composant enfant. Ainsi, des cas comme le changement de mise au point, l'augmentation et la diminution des éléments et le flou peuvent être des cas où vous avez besoin d'utiliser ce crochet afin de mettre à jour le composant parent en conséquence. </p> <h4> Syntaxe </h4> <pre class="brush:php;toolbar:false"> useImperativeHandle (ref, createhandle, [dépendances]) 

  Exemple

  Dans cet exemple, nous avons deux boutons, un dans le composant parent et un dans le composant enfant. En cliquant sur le bouton parent, nous permet de récupérer des données du composant enfant, ce qui nous permet de manipuler le composant parent. Il est configuré dans le fait que cliquer sur le bouton Child ne passe rien du composant parent au composant enfant pour aider à illustrer la façon dont nous passons le contenu dans la direction opposée.

   // Parent Component Import React, {useref} de "React"; int ();}}} & gt; boîte parent  bouton> <childcomponent ref="{Controlref}"></childcomponent>  div>);} Exporter par défaut parentComponent;  pre> <pre class="brush:php;toolbar:false"> // Child Component Import React, {ForwardRef, useImperativeHandle, useState} setPrint (! print);},}); Box  Button> {print & amp; & amp; des crochets de réaction les moins couramment utilisés mais intéressants. Il améliore les performances et réduit la latence, en particulier dans les grandes calculs dans les applications. Comment cela pourrait-il arriver? Le crochet <code> useMemo </code> empêche React de recalculer la valeur chaque fois que l'état du composant est mis à jour et le composant est rendu.  <p> Vous verrez que la fonction répond aux changements d'état. <code> UseMemo </code> Hook accepte une fonction et <strong> renvoie la valeur de retour de la fonction </strong>. Il cache la valeur pour éviter que le travail supplémentaire ne soit dépensé pour le renforcer, puis le renvoie lorsque l'une des dépendances change. </p> <p> Ce processus est appelé <strong> mémorisation </strong>, ce qui aide à améliorer les performances en se souvenant de la valeur précédemment demandée afin qu'elle puisse être utilisée à nouveau sans répéter tous ces calculs. </p> <h4> Scénario d'utilisation </h4> <p> Le meilleur cas d'utilisation sera chaque fois que vous traitez de calculs lourds que vous souhaitez stocker la valeur et l'utiliser dans les modifications d'état suivantes. Il peut apporter un bon coup de pouce, mais une surutilisation peut avoir l'effet opposé exact, prenant ainsi la mémoire de l'application. </p> <h4> Syntaxe </h4> <pre class="brush:php;toolbar:false"> useMemo (() = & gt; {// code ici}, []) 

  Exemple

  Lorsque le bouton est cliqué, ce mini programme indique si le nombre est un nombre uniforme ou impair, puis piste la valeur. J'ai ajouté de nombreux zéros à la boucle pour augmenter sa puissance de calcul. Il renvoie la valeur en secondes et fonctionne toujours bien en raison du crochet usememo .

   // useMemo.js Import React, {useState, useMemo} de la fonction 'react' memo () {const [memoOne, setMemoOne] = useState (0); T; squaredNumber = useMemo (() = & gt; {Soit i = 0; while (i & lt; 100000000) {i} // augmenter le montant de calcul Console.log ("Squared the Number"); Retour MemoOne * MemoOne;}, [MemoOne]); > <p> est même: {iseven? )); s la fonction elle-même. </p>  <p> </p><h3> <code> usecallback </code> </h3>  <p> </p><p> <code> usecallback </code> Le crochet est un autre crochet intéressant, et la section précédente est un spoiler de ses fonctionnalités. </p>  <p> </p><p> Comme nous venons de le voir, <code> usecallback </code> fonctionne de manière similaire à <code> les crochets UseMemo </code>, car ils utilisent tous la mémoire pour mettre en cache certains contenus pour une utilisation ultérieure. <code> useMemo </code> Store le calcul de la fonction en tant que valeur en cache, tandis que <code> usecallback </code> stocke et renvoie la fonction. </p>  <p> </p><h4> Scénario d'utilisation </h4>  <p> </p><p> like <code> usememo </code>, <code> usecallback </code> est une bonne optimisation des performances car il stocke et renvoie des rappels souvenirs et l'une de ses dépendances sans retenue. </p>  <p> </p><h4> Syntaxe </h4>  <pre class="brush:php;toolbar:false"> const getMemoizedCallback = useCallback (() = & gt; {DoSomething ()}, []); 

  Exemple

  Réacte d'importation, {USECallback, USESTATEC allback-child "; import" ./app.css "Exporter la fonction default application () {const [toggle, settoggle] = useState (false); const [data, setData] = useState ("Je suis des données qui ne changeraient pas à chaque rendu, grâce à l'USECallback"); const RettaitFunction = UseCallback (Name) = GT; basculer & amp; & amp;