React est l'un des frameworks frontaux les plus populaires pour JavaScript. Contrairement à d'autres frameworks comme Angular, il est très neutre. Par conséquent, c'est à vous de décider comment vous voulez écrire ou structurer votre code React.

Cet article explore certaines pratiques à suivre pour améliorer les performances de votre application React.

1. Utilisation de composants fonctionnels et de crochets au lieu de classes

Dans React, vous pouvez utiliser des composants de classe ou fonctionnels avec des crochets. Vous devez cependant utiliser plus souvent les composants fonctionnels et les crochets, car ils se traduisent par un code plus concis et lisible par rapport aux classes.

Considérez le composant de classe suivant qui affiche les données de l'API NASA.

la classe NasaData étend React. Composant {
 constructeur (accessoires) {
 super (accessoires);
 this.state = {
 Les données: [],
 };
 }
 componentDidMount() {
 aller chercher(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())

instagram viewer


 .then((json) => {
 this.setState({
 données: json,
 });
 });
 }
 rendu() {
 const { données } = this.state ;
 si (!données.longueur)
 retourner (


 Récupération des données... 
{" "}



 );
 retourner (
 <>
 Récupérer des données à l'aide du composant Class 
{" "}
 {data.map((item) => (
{élément.titre}

 ))}
 );
 }
}

Le même composant peut être écrit à l'aide de crochets.

const NasaData = () => {
 const [données, setdata] = useState (null);
 useEffet(() => {
 aller chercher(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [Les données]);
 retourner (
 <>
 Récupérer des données à l'aide du composant Class 
{" "}
 {data.map((item) => (
{élément.titre}

 ))}
 );
};

Même si le bloc de code ci-dessus fait la même chose que le composant de classe, il est moins complexe, minimal et facile à comprendre, ce qui contribue à une meilleure expérience de développement.

2. Évitez d'utiliser l'état (si possible)

L'état React garde une trace des données qui, lorsqu'elles sont modifiées, déclenchent le rendu du composant React. Lors de la création d'applications React, évitez autant que possible d'utiliser l'état, car plus vous utilisez d'état, plus vous avez de données à suivre dans votre application.

Une façon de minimiser l'utilisation de l'état est de ne le déclarer que lorsque cela est nécessaire. Par exemple, si vous récupérez des données utilisateur à partir d'une API, stockez l'intégralité de l'objet utilisateur dans l'état au lieu de stocker les propriétés individuelles.

Au lieu de faire ceci :

const [nom d'utilisateur, setusername] = useState('')
const [mot de passe, setpassword] = useState('')

Faites ceci :

const [utilisateur, setuser] = useState({})

Lors du choix d'une structure de projet, optez pour un composant centré. Cela signifie avoir tous les fichiers concernant un composant dans un dossier.

Si vous créiez un Barre de navigation composant, créez un dossier appelé barre de navigation contenant le Barre de navigation composant lui-même, la feuille de style et les autres fichiers JavaSript et actifs utilisés dans le composant.

Un dossier unique contenant tous les fichiers d'un composant facilite la réutilisation, le partage et le débogage. Si vous avez besoin de voir comment fonctionne un composant, vous n'avez qu'à ouvrir un seul dossier.

4. Évitez d'utiliser des index comme accessoires clés

React utilise des clés pour identifier de manière unique les éléments d'un tableau. Avec les clés, React peut identifier quel élément a été modifié, ajouté ou supprimé du tableau.

La plupart du temps, lors du rendu de tableaux, vous pouvez utiliser l'index comme clé.

éléments const = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"] ;
 retourner (
 <>
 {arr.map((elem, index) => {
{élém}
;
 })}
 );
};

Bien que cela fonctionne parfois, l'utilisation de l'index comme clé peut introduire des problèmes, en particulier si la liste doit changer. Considérez cette liste.

const arr = ["item1", "item2", "item3", "item4", "item5"] ;

Actuellement, le premier élément de la liste, "Objet 1" est à l'index zéro, mais si vous avez ajouté un autre élément au début de la liste, le "Objet 1” index passerait à 1, ce qui modifierait le comportement de votre tableau.

La solution consiste à utiliser une valeur unique comme index pour s'assurer que l'identité de l'élément de la liste est conservée.

5. Optez pour des fragments au lieu de divs si possible

Les composants React doivent renvoyer du code enveloppé dans une seule balise, généralement un ou un fragment React. Vous devriez opter pour des fragments dans la mesure du possible.

En utilisant augmente la taille du DOM, en particulier dans les projets de grande envergure, car plus vous avez de balises ou de nœuds DOM, plus votre site Web a besoin de mémoire et plus un navigateur utilise de puissance pour charger votre site Web. Cela entraîne une vitesse de page réduite et une expérience utilisateur potentiellement médiocre.

Un exemple d'élimination inutile tags ne les utilise pas lors du retour d'un seul élément.

const Bouton = () => {
 retourner Afficher;
};

6. Suivez les conventions de dénomination

Vous devez toujours utiliser PascalCase lorsque vous nommez des composants pour les différencier des autres fichiers JSX non composants. Par exemple: Champ de texte, NavMenu, et Bouton de réussite.

Utilisez camelCase pour les fonctions déclarées dans les composants React comme poignéeEntrée() ou showElement().

7. Évitez le code répétitif

Si vous remarquez que vous écrivez du code dupliqué, convertissez-le en composants pouvant être réutilisés.

Par exemple, il est plus logique de créer un composant pour votre menu de navigation au lieu d'écrire à plusieurs reprises le code dans chaque composant nécessitant un menu.

C'est l'avantage d'une architecture à base de composants. Vous pouvez décomposer votre projet en petits composants que vous pouvez réutiliser dans votre application.

8. Utiliser la déstructuration d'objets pour les accessoires

Au lieu de transmettre l'objet d'accessoires, utilisez la déstructuration d'objet pour transmettre le nom de l'accessoire. Cela élimine le besoin de se référer à l'objet props chaque fois que vous avez besoin de l'utiliser.

Par exemple, voici un composant qui utilise les accessoires tels quels.

Bouton const = (accessoires) => {
 retourner {accessoires.text};
};

Avec la déstructuration d'objet, vous vous référez directement au texte.

Bouton const = ({texte}) => {
 retourner {texte};
};

9. Rendu dynamique des tableaux à l'aide de Map

Utiliser carte() pour restituer dynamiquement des blocs HTML répétés. Par exemple, vous pouvez utiliser carte() pour afficher une liste d'éléments dans Mots clés.

éléments const = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"] ;
 retourner (
 <>
 {arr.map((elem, index) => {
{élém}
;
 })}
 );
 };

À des fins de comparaison, voici comment vous pouvez rendre la liste sans carte(). Cette approche est très répétitive.

Liste const = () => {
 retourner (


Objet 1

Article2

Article3

Article4

Article5




 );
};

10. Écrire des tests pour chaque composant React

Écrivez des tests pour les composants que vous créez car cela réduit les possibilités d'erreurs. Les tests garantissent que les composants se comportent comme prévu. L'un des frameworks de test les plus courants pour React est Jest, et il fournit un environnement dans lequel vous pouvez exécuter vos tests.

Bien que React soit quelque peu flexible quant à la façon dont vous pouvez l'utiliser, suivre des pratiques spécifiques vous aidera à tirer le meilleur parti de votre expérience.

Lorsque vous suivez ces conseils, gardez à l'esprit votre projet et vos objectifs particuliers; certains seront plus pertinents dans certains cas que d'autres.

Comment utiliser les API dans React à l'aide de Fetch et d'Axios

Vous voulez savoir comment utiliser les API? Comprendre comment utiliser les API dans React est un élément clé de l'utilisation des API.

Lire la suite

A propos de l'auteur