Maison > interface Web > js tutoriel > React : Garder les composants purs

React : Garder les composants purs

DDD
Libérer: 2024-10-22 06:22:03
original
683 Les gens l'ont consulté

React : Keeping Components Pure

Si vous avez aimé l'article, vous pouvez acheter un café pour soutenir Achetez-moi du café


Garder les composants purs

Certaines fonctions JavaScript doivent être pures. Les fonctions pures effectuent uniquement un calcul et rien d'autre. En écrivant vos composants sous forme de fonctions pures, vous pouvez éviter toutes les erreurs déroutantes et les comportements imprévisibles à mesure que votre base de code se développe. Vous pouvez rendre vos composants faciles à gérer.


Pureté

Alors, comment pouvons-nous créer une fonction pure ? Et quelles caractéristiques doit avoir une fonction pour qu’elle soit pure ? Une fonction pure doit être une fonction présentant les caractéristiques suivantes :

  • Il s'occupe de ses propres affaires. Il ne modifie aucun objet ou variable qui existait avant son appel.

  • Même entrée, même sortie. Avec les mêmes entrées, une fonction pure devrait toujours renvoyer le même résultat. Cela ne devrait pas donner des résultats différents aux mêmes entrées.

Considérons une formule mathématique : y = 2x

Si x = 2, y = 4. Cet invariant est toujours le même résultat.

Si x = 3, y = 6. Cet invariant est toujours le même résultat.

Si x = 3, parfois y ne sera pas 9, –1 ou 2,5, selon une autre situation.

Si y = 2x et x = 3 alors y sera toujours 6.

Si nous en faisions une fonction JavaScript :

function getDouble(number) {
  return 2 * number;
}

Copier après la connexion

getDouble est une fonction pure. Si vous lui transmettez 3, il renverra 6. Toujours.

React est construit autour de ce concept. Cela suppose que chaque composant se comporte comme une fonction pure, ce qui signifie que vos composants React doivent toujours renvoyer la même sortie JSX avec les mêmes entrées.

Expliquons un composé pur en donnant des exemples.

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

Copier après la connexion

Il renvoie toujours quel que soit le paramètre utilisateur donné.comme une formule mathématique


Conclusion

Un composant doit être pur, c'est-à-dire :

Il s'occupe de ses propres affaires. Il ne doit modifier aucun objet ou variable qui existait avant le rendu.

Mêmes entrées, même sortie. Avec les mêmes entrées, un composant doit toujours renvoyer le même JSX.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal