Guide des normes de codage React : comment garder le code cohérent et lisible

Guide de discipline du code React : Comment garder votre code cohérent et lisible

Citation :
Lors du développement d'applications React, il est très important de garder votre code cohérent et lisible. Une bonne spécification de code peut aider l'équipe de développement à mieux travailler ensemble, à réduire l'apparition de bogues et à améliorer la qualité du code. Cet article vous présentera quelques bonnes pratiques pour les spécifications du code React et fournira des exemples de code spécifiques.

1. Spécifications de dénomination

1. Nom des composants : utilisez la méthode de dénomination en gros chameau, avec la première lettre en majuscule.
   Par exemple :

   class MyComponent extends React.Component {
     // ...
   }

2. Nom de la méthode : utilisez la méthode de dénomination en casse chameau, avec la première lettre en minuscule.
   Par exemple :

   class MyComponent extends React.Component {
     handleClick() {
    // ...
     }
   }

3. Nom constant : utilisez toutes les lettres majuscules et utilisez des traits de soulignement pour relier les mots.
   Par exemple :

   const API_URL = 'https://example.com/api';

2. Structure du code

1. Indentation : utilisez 2 espaces pour l'indentation et évitez d'utiliser des tabulations.
   Exemple :

   class MyComponent extends React.Component {
     render() {
    // ...
     }
   }

2. Newline : chaque propriété et méthode doit être sur sa propre ligne.
   Par exemple :

   class MyComponent extends React.Component {
     render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
     }
   }

3. Écriture de composants

1. Composants fonctionnels : Pour les composants qui n'ont qu'une méthode de rendu, essayez d'utiliser des composants fonctionnels.
   Par exemple :

   function MyComponent(props) {
     return (
    <div>
      <h1>Hello, world!</h1>
    </div>
     );
   }

2. Composants de classe : pour les composants qui doivent conserver leur état, utilisez des composants de classe.
   Par exemple :

   class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
     }
     
     render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          Increment
        </button>
      </div>
    );
     }
   }

4. PropTypes et DefaultProps

1. PropTypes : saisissez les accessoires du composant.
   Par exemple :

   import PropTypes from 'prop-types';
   
   class MyComponent extends React.Component {
     // ...
   }
   
   MyComponent.propTypes = {
     name: PropTypes.string.isRequired,
     age: PropTypes.number
   };

2. DefaultProps : définissez les valeurs par défaut pour les accessoires des composants.
   Par exemple :

   class MyComponent extends React.Component {
     static defaultProps = {
    age: 18
     };
     
     // ...
   }

5. Traitement des événements

1. Nom de l'événement : utiliser le préfixe plus la méthode de dénomination du cas de chameau.
   Par exemple :

   class MyComponent extends React.Component {
     handleClick() {
    // ...
     }
     
     render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
     }
   }

2. Passage de paramètres d'événement : évitez d'utiliser des objets d'événement directement dans les boucles. Vous devez utiliser des fonctions fléchées pour transmettre des objets d'événement.
   Par exemple :

   class MyComponent extends React.Component {
     handleClick(id) {
    // ...
     }
     
     render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <li key={item.id} onClick={() => this.handleClick(item.id)}>
            {item.name}
          </li>
        )}
      </ul>
    );
     }
   }

Conclusion :
Voici quelques bonnes pratiques pour les spécifications du code React. En suivant ces spécifications, nous pouvons maintenir la cohérence et la lisibilité du code, améliorer la qualité du code et l'efficacité du développement. J'espère que ces spécifications pourront être utiles au développement de React de chacun.

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!