React est l'un des frameworks frontaux les plus populaires pour le langage JavaScript. Contrairement à d'autres frameworks comme Angular, il n'est pas très systématisé. Par conséquent, c'est à vous de décider comment vous voulez écrire ou structurer votre code React.
Certaines des meilleures pratiques React que vous devez suivre pour améliorer les performances de votre application sont répertoriées ci-dessous pour que vous puissiez en tirer parti. Vérifier Comment créer une application de chat en utilisant React et Firebase.
1. Utilisez des composants et des crochets au lieu de classes
Dans React, vous pouvez utiliser des classes ou des composants fonctionnels avec des Hooks. Cependant, vous devez utiliser plus souvent les composants fonctionnels et les crochets, car ils se traduisent par un code plus concis et lisible par rapport aux classes.
Voici un extrait du bloc de classe qui affiche les données de l'API de la NASA.
class NasaData extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
if (!data.length)
return (
<div>
<h1> Fetching data…. </h1>{“ “}
</div>
);
return (
<>
<h1> Fetch data using Class component </h1>{“ “}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}
} Vous pouvez écrire le même composant à l'aide de Hooks :
const NasaData = () => {
const [data, setdata] = useState(null);
useEffect(() => {
fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
setdata(json);
});
}, [data]);
return (
<>
<h1> Fetch data using Class component </h1>{“ “}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}; Bien que le code ci-dessus fasse la même chose que le composant de classe, il est moins complexe, moins borné et facile à comprendre.
2. Évitez d'utiliser l'état (si possible)
L'état React garde une trace des données qui, lorsqu'elles sont modifiées, entraînent 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 devez suivre de données dans votre application.
Une façon de réduire l'utilisation de l'état consiste à le déclarer uniquement 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 plutôt que dans des propriétés individuelles.
au lieu des suivants :
const [username, setusername] = useState(‘’) const [password, setpassword] = useState(‘’)
Vous pouvez effectuer les opérations suivantes :
const [user, setuser] = useState({}) 3. Organiser les fichiers liés au même composant dans un dossier
Lorsque vous décidez d'une structure de dossiers pour votre application React, envisagez d'utiliser une structure centrée sur les composants. Cela signifie stocker tous les fichiers liés à un seul composant dans un dossier.
Si vous créez un plugin Navbar, par exemple, créez un dossier nommé Navbar qui contient le fichier du plugin, la feuille de style, les fichiers javascript et les autres ressources utilisées dans le plugin.
Un dossier unique contenant tous les fichiers de composants facilite la réutilisation, le partage et le débogage. Si vous avez besoin de voir comment fonctionne un plugin, ouvrez simplement un dossier et parcourez son contenu.
Les autres bonnes pratiques du dossier React sont :
- Utilisez des fichiers d'index pour résumer les détails d'implémentation de votre fichier de composant. En regardant l'exemple Navbar, créez un dossier Navbar et dans ce dossier ajoutez un fichier de composant appelé index.js (ou .ts).
- Conservez les composants réutilisables dans un dossier séparé. Si vous avez des composants qui sont utilisés par plus d'une partie de votre application, envisagez de les conserver dans un dossier nommé Composantes. Cela vous aidera à les localiser facilement.
- Conservez les fonctions utilitaires dans un dossier séparé, tel que le dossier lib ou le dossier Assistants. Cela facilitera la gestion et la réutilisation ultérieure de ces fonctions.
4. Évitez d'utiliser les index comme accessoires principaux
React utilise des clés pour identifier de manière unique les éléments d'un tableau. Avec les clés, React peut marquer quel élément a été modifié, ajouté ou supprimé du tableau.
Lors du rendu des tableaux, vous pouvez utiliser l'index comme clé.
const Items = () => {
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
}; Bien que cela fonctionne parfois, l'utilisation de l'index comme clé peut causer des problèmes, surtout si la liste doit changer. Considérez cette liste.
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
Actuellement, le premier élément de la liste, "Item1" est à l'index zéro, mais si vous ajoutez un autre élément au début de la liste, l'index de "Item1" passera à 1, ce qui modifie 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 préservée.
5. Choisir des Divs au lieu de Divs si possible
Les composants React doivent renvoyer du code enfermé dans une seule balise, généralement ou la réaction. Vous devez choisir des pièces dans la mesure du possible.
utiliser du plomb Cela peut augmenter la taille du DOM, en particulier dans les grands projets, car plus vous avez de balises ou de nœuds DOM, plus votre site Web a besoin de mémoire, plus le navigateur utilise de puissance pour charger le site Web. Cela se traduit par une vitesse de page inférieure et une expérience utilisateur potentiellement médiocre.
Un exemple de se débarrasser des signes Non essentiel est de ne pas l'utiliser lors du retour d'un seul article.
const Button = () => {
return <button>Display</button>;
}; 6. Suivez les conventions de nommage
Vous devez toujours utiliser PascalCase (supprimer les espaces et mettre en majuscule la première lettre de chaque mot) lorsque vous nommez des composants pour les distinguer des autres fichiers JSX non composants. Par exemple : TextField, NavMenu et SuccessButton.
Utilisez CamelCase (écrivez des phrases sans espaces ni ponctuation, les mots sont séparés par une seule lettre majuscule) pour les fonctions déclarées dans les composants React tels que handleInput() ou showElement().
7. Évitez les codes redondants
Si vous remarquez que vous écrivez du code redondant, convertissez-le en composants réutilisables.
Par exemple, il est plus logique de créer un composant pour votre propre menu de navigation que d'écrire à plusieurs reprises du code dans chaque composant nécessitant un menu.
C'est l'avantage de l'architecture par blocs. Vous pouvez décomposer votre projet en petits composants que vous pouvez réutiliser dans votre application. Vérifier Comment créer un lecteur vidéo dans React.
8. Utilisez l'attribution de décomposition pour obtenir des accessoires
Au lieu de transmettre l'objet props, utilisez l'affectation de déconstruction de l'objet pour transmettre le nom de la propriété. Cela ignore la nécessité 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 propriétés telles quelles.
const Button = (props) => {
return <button>{props.text}</button>;
}; Avec l'affectation de décomposition d'objet, vous pouvez référencer directement le texte.
const Button = ({text}) => {
return <button>{text}</button>;
}; 9. Afficher les tableaux dynamiquement à l'aide de la carte
Utilisez map() pour afficher dynamiquement les blocs d'itération de HTML. Par exemple, vous pouvez utiliser map() pour afficher une liste d'éléments dans les balises .
const Items = () => {
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
return (
<>
{arr.map((elem, index) => {
<li key={elem+index}>{elem}</li>;
})}
</>
);
}; À des fins de comparaison, voici comment afficher la liste sans map(). Cette approche est très répétitive.
const List = () => {
return (
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
);
}; 10. Ecrire des tests pour chaque composant de la réaction
Écrivez des tests pour les composants que vous créez, car ils réduisent le risque d'erreurs. Les tests garantissent que les composants se comportent comme prévu. Jest est l'un des frameworks de test les plus populaires de React, et il fournit un environnement dans lequel vous pouvez exécuter vos tests. Vérifier Comment créer des objets par glisser-déposer dans React.
React est un framework puissant, mais vous devez suivre certaines pratiques
Bien que React soit très flexible dans son utilisation, 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, car différentes bonnes pratiques React peuvent être plus pertinentes dans différents contextes. Par exemple, un projet avec une petite équipe et une portée limitée peut ne pas nécessiter le même niveau d'organisation des dossiers qu'un grand projet avec plusieurs équipes travaillant ensemble. Vous pouvez voir maintenant Comment contribuer à des projets open source en tant que débutant.
