Reatc.js : Garder les composants purs

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;
}

getDouble est une pure fonction. 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>
  );
}

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

Vous pouvez considérer vos ingrédients comme des recettes. Vous connaissez les ingrédients, et si vous n'introduisez pas de nouveaux ingrédients pendant la cuisson, vous vous retrouverez avec le même plat à chaque fois.

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!