eact Astuces pour améliorer la qualité et les performances du code

React est une puissante bibliothèque JavaScript pour créer des interfaces utilisateur, et avec seulement quelques astuces, vous pouvez écrire du code plus propre, plus efficace et maintenable. Dans cet article, nous explorerons cinq astuces React essentielles qui vous aideront à écrire du code plus performant et plus lisible.

---

1. Utilisez des opérateurs ternaires au lieu des opérateurs AND (&&) pour restituer les éléments

Dans React, il est courant de rendre conditionnellement des composants ou des éléments en fonction de certaines conditions. Cependant, l'utilisation de l'opérateur && pour le rendu conditionnel peut être délicate lorsque l'expression évaluée aboutit à une valeur fausse (par exemple, faux, nul, non défini, 0 ou ''). Pour éviter tout comportement de rendu involontaire, préférez utiliser un opérateur ternaire.

Exemple de && Comportement :

Utilisation de && dans le rendu conditionnel :

{0 && <h1 id="Hello-world">Hello world 5</h1>}
{0 ? <h1 id="Hello-world">Hello world 6</h1> : null}

• Le premier exemple ({0 &&

  Hello world 5

  }) affichera 0 dans l'interface utilisateur car 0 est une valeur fausse en JavaScript, et React l'interprétera comme faux. Cependant, au lieu de ne rien afficher, React affichera lui-même la fausse valeur (0).

• Le deuxième exemple ({0 ?

  Hello world 6

  : null}) ne rendra rien. Puisque la condition est 0 (ce qui est faux), l'opérateur ternaire sera évalué à null et React ne rendra rien.

Meilleure approche avec l'opérateur ternaire :

Au lieu de vous fier à l'opérateur &&, vous pouvez utiliser un opérateur ternaire pour vous assurer d'afficher le contenu de secours correct, en particulier lorsque la condition est fausse.

{0 ? <h1 id="Hello-world">Hello world 5</h1> : null}

Dans ce cas, si la condition est fausse (0), React rendra null, ce qui n'entraînera aucun rendu, offrant un comportement plus prévisible et prévu.

---

2. Initialiseur paresseux avec useState

Le hook useState de React peut prendre une fonction comme valeur initiale, vous permettant d'initialiser paresseusement l'état. Ceci est particulièrement utile lorsque l'état initial est coûteux à calculer ou lorsqu'il dépend d'un calcul qui ne doit être exécuté qu'une seule fois.

Pourquoi utiliser l'initialisation paresseuse ?

• Amélioration des performances : Si l'état initial implique des calculs coûteux ou une récupération de données, l'initialisation paresseuse permet de différer ce coût jusqu'à ce qu'il soit réellement nécessaire.
• Évitez les calculs inutiles : La fonction que vous transmettez à useState comme valeur initiale ne sera exécutée qu'une seule fois lors du montage du composant, et elle ne sera pas recalculée lors des rendus suivants.

Exemple :

{0 && <h1 id="Hello-world">Hello world 5</h1>}
{0 ? <h1 id="Hello-world">Hello world 6</h1> : null}

Dans cet exemple :

• useState(() => Math.random()) appellera la fonction une seule fois, lors du rendu initial.
• Cela garantit que la génération de nombres aléatoires ne se produit qu'une seule fois, améliorant ainsi les performances si le calcul était coûteux.

---

3. Utilisez des composants de chargement différé pour améliorer les performances

React.lazy() et Suspense sont d'excellents outils pour le chargement paresseux de composants, ce qui permet de diviser votre JavaScript en paquets plus petits et de les charger uniquement en cas de besoin. Cela réduit considérablement le temps de chargement initial et améliore les performances de votre application.

Exemple :

{0 ? <h1 id="Hello-world">Hello world 5</h1> : null}

Dans cet exemple :

• React.lazy() vous permet d'importer dynamiquement LazyComponent.
• Le composant Suspense est utilisé pour afficher un état de chargement jusqu'à ce que le composant chargé paresseux soit entièrement rendu.

En utilisant le chargement paresseux, votre application chargera uniquement les composants nécessaires au rendu initial et en récupérera d'autres à la demande, améliorant ainsi les performances, en particulier dans les grandes applications.

---

4. Utilisation du chaînage facultatif en JavaScript

Si vous travaillez avec JavaScript, le chaînage facultatif (?.) est une bouée de sauvetage lors de l'accès à des propriétés profondément imbriquées sur des objets. Il empêche les erreurs qui se produisent lors de la tentative d'accès aux propriétés non définies ou nulles. Le chaînage facultatif est disponible dans JavaScript moderne et vous permet d'accéder en toute sécurité aux propriétés sans avoir à vérifier manuellement la valeur null ou non définie.

Exemple :

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

Dans cet exemple :

• data?.info?.address accède en toute sécurité à la propriété d'adresse sans générer d'erreur si les données ou les informations sont indéfinies ou nulles.
• Le ?? L'opérateur fournit une valeur par défaut si l'adresse n'est pas définie.

Sans chaînage facultatif, vous devrez vérifier manuellement chaque niveau, ce qui peut rapidement conduire à un code encombré et plus difficile à lire. Le chaînage optionnel le maintient propre et sans erreur.

---

5. Utilisez useRef pour les formulaires pour éviter les nouveaux rendus

Dans React, lorsque vous travaillez avec des formulaires et que vous n'avez pas besoin que le composant soit restitué à chaque modification d'entrée, il est préférable d'utiliser useRef au lieu de useState. useRef stocke directement la valeur du champ de saisie et ne déclenche pas de nouveau rendu lorsque la valeur change, ce qui le rend plus performant pour les grands formulaires.

Exemple :

{0 && <h1 id="Hello-world">Hello world 5</h1>}
{0 ? <h1 id="Hello-world">Hello world 6</h1> : null}

Dans cet exemple TypeScript :

• useRef est utilisé pour garder une trace de la valeur d'entrée sans provoquer un nouveau rendu du composant à chaque modification d'entrée.
• nameRef.current est utilisé pour accéder directement à la valeur de l'entrée lorsque le formulaire est soumis.

L'utilisation de useRef est particulièrement utile lorsque la valeur du formulaire n'a pas besoin de déclencher de nouveaux rendus pour la validation ou les mises à jour dynamiques, ce qui en fait un excellent choix pour les formulaires sensibles aux performances.

---

Conclusion

En appliquant ces cinq astuces React dans votre code, vous pouvez améliorer considérablement les performances, la lisibilité et la maintenabilité. Voici un bref récapitulatif :

1. Utilisez des opérateurs ternaires pour le rendu conditionnel au lieu de &&.
2. Profitez de l'initialisation paresseuse dans useState.
3. Implémentez un chargement différé pour les composants afin d'améliorer les temps de chargement initiaux.
4. Utilisez le chaînage facultatif pour un accès plus sûr aux propriétés en JavaScript.
5. Utilisez useRef dans les formulaires pour éviter les rendus inutiles.

Grâce à ces techniques, vos applications React seront plus efficaces et plus faciles à maintenir, conduisant à de meilleures expériences utilisateur et à un développement plus fluide. Bon codage !

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!