Lorsque vous travaillez avec JavaScript et React, la maîtrise de certains modèles de codage peut améliorer considérablement la lisibilité, la maintenabilité et les performances globales de votre code. Que vous soyez débutant ou développeur chevronné, cet article vous guidera à travers 20 modèles et concepts clés essentiels pour écrire du code propre et efficace. Allons-y !
Une manière concise de restituer des composants en fonction d'une condition consiste à utiliser l'opérateur && (ET logique). Au lieu d'écrire une instruction if complète, nous pouvons faire ceci :
{isLoggedIn && <LogoutButton />}
Si isLoggedIn est vrai, le LogoutButton sera rendu. Sinon, rien ne se passe. Simple et propre !
La déstructuration est un moyen utile d'extraire des valeurs des accessoires et de l'état sans accéder à chaque valeur individuellement.
const { value } = props;
Cette approche rend votre code plus concis et plus facile à lire. Vous pouvez même déstructurer l'état de la même manière :
const { user, isLoggedIn } = this.state;
Lorsque vous ne souhaitez pas envelopper des éléments dans un div supplémentaire (pour éviter les éléments DOM inutiles), utilisez React Fragments.
<> <ComponentA /> <ComponentB /> </>
Cela regroupera les deux composants sans ajouter de wrapper supplémentaire dans le DOM.
Lors de l'utilisation de gestionnaires d'événements, les fonctions fléchées fournissent un moyen concis de lier ceci sans écrire .bind(this) dans le constructeur :
<button onClick={() => this.handleClick()}>Click</button>
Cela évite également de créer une nouvelle instance de fonction à chaque rendu, ce qui peut améliorer les performances des composants volumineux.
Les composants de fonction React sont un moyen plus simple d'écrire des composants qui ne nécessitent pas de méthodes de cycle de vie.
const Welcome = ({ name }) => <h1>Hello, {name}</h1>;
Il s'agit d'un composant simple et sans état qui reçoit un nom comme accessoire et restitue un message.
Le chaînage facultatif vous permet d'accéder en toute sécurité aux propriétés profondément imbriquées sans vérifier la valeur null ou indéfini à chaque niveau.
const name = props.user?.name;
Si l'utilisateur est nul ou indéfini, il renverra undéfini plutôt que de générer une erreur.
L'opérateur de propagation est un moyen simple de transmettre tous les accessoires sans les spécifier manuellement.
<MyComponent {...props} />
Ceci est particulièrement utile lorsque vous avez plusieurs accessoires à transmettre mais que vous souhaitez éviter le code répétitif.
L'opérateur de coalescence nul ?? vous permet de définir une valeur par défaut si l'accessoire est nul ou indéfini.
const username = props.username ?? 'Guest';
Si props.username est nul ou non défini, la valeur par défaut sera « Invité ».
Vous pouvez également définir des accessoires par défaut directement dans le paramètre d'un composant de fonction :
const MyComponent = ({ prop = 'default' }) => <div>{prop}</div>;
Ce modèle est utile pour garantir que votre composant a une valeur de repli pour certains accessoires.
Utilisez l'évaluation de court-circuit avec l'opérateur logique OU (||) pour fournir les valeurs par défaut :
const value = props.value || 'default';
Si props.value est faux (comme null, undefined ou ""), la valeur par défaut est "default".
Avec les littéraux de modèle, vous pouvez attribuer dynamiquement des noms de classe en fonction de conditions :
const className = `btn ${isActive ? 'active' : ''}`;
Cela permet de basculer facilement entre les classes CSS dans vos composants.
Vous pouvez utiliser des styles en ligne qui changent dynamiquement en fonction des conditions :
const style = { color: isActive ? 'red' : 'blue' };
C'est un moyen simple et rapide de changer de style à la volée.
Lorsque vous avez besoin de clés dynamiques dans des objets, les noms de propriétés calculés le permettent :
const key = 'name';
const obj = { [key]: 'value' };
C'est pratique lorsque vous devez créer des objets avec des clés variables.
Le puissant rendu de liste de React peut être effectué efficacement à l'aide de .map().
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
Assurez-vous de toujours inclure un accessoire clé unique lors du rendu des listes dans React.
Un autre excellent moyen de rendre conditionnellement des composants est l'opérateur ternaire :
const button = isLoggedIn ? <LogoutButton /> : <LoginButton />;
Il s'agit d'une alternative claire et concise à if-else pour la logique de rendu en ligne.
Similar to default values, logical OR (||) can be used to provide fallback data:
const displayName = user.name || 'Guest';
This ensures that if user.name is falsy, 'Guest' is used instead.
You can destructure props directly in the function parameter:
const MyComponent = ({ prop1, prop2 }) => <div>{prop1} {prop2}</div>;
This keeps your code concise and eliminates the need for extra variables inside the function.
When the variable name matches the property name, you can use the shorthand syntax:
const name = 'John';
const user = { name };
This is a cleaner way to assign variables to object properties when they share the same name.
Array destructuring allows you to unpack values from arrays in a single line:
const [first, second] = array;
This pattern is especially useful when working with hooks like useState in React.
If you want to rename an imported component or module, use aliases:
import { Component as MyComponent } from 'library';
This is useful when you want to avoid naming conflicts or improve clarity in your code.
By mastering these 20 JavaScript and React patterns, you'll write more readable, maintainable, and efficient code. These best practices—ranging from conditional rendering to destructuring—will help you create cleaner components and handle data flow effectively in your applications.
Understanding and using these patterns will make your development process smoother and your code more professional. Keep coding, and keep improving!
For those looking to deepen their knowledge of JavaScript and React patterns, consider exploring these resources:
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
