Menguasai trengkas Essential React untuk Kod Bersih dan Cekap

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 !

1. Rendu conditionnel avec l'opérateur &&

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 !

2. Accessoires et État déstructurants

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;

3. Syntaxe courte des fragments

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.

4. Fonction de flèche dans les gestionnaires d'événements

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.

5. Déclaration des composants de fonction

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.

6. Chaînage facultatif pour l'accès à la propriété

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.

7. Distribuer les attributs

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.

8. Opérateur de fusion nul pour les accessoires par défaut

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é ».

9. Accessoires par défaut dans les composants de fonction

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.

10. Évaluation des courts-circuits pour les valeurs par défaut

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".

11. Modèles littéraux pour les noms de classe dynamiques

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.

12. Styles conditionnels en ligne

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.

13. Clés dynamiques dans les littéraux d'objet

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.

14. Array .map() pour les listes de rendu

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.

15. Opérateur ternaire pour le rendu conditionnel

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.

16. Logical OR for Fallback Values

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.

17. Destructuring in Function Parameters

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.

18. Shorthand Object Property Names

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.

19. Array Destructuring

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.

20. Import Aliases

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.

Wrapping Up

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!

Further Reading

For those looking to deepen their knowledge of JavaScript and React patterns, consider exploring these resources:

• JavaScript Patterns: The Good Parts
• React Patterns
• Clean Code JavaScript

Atas ialah kandungan terperinci Menguasai trengkas Essential React untuk Kod Bersih dan Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!