Pourquoi devriez-vous éviter les fonctions de flèches en ligne dans les méthodes de rendu React ?

Éviter les fonctions de flèche en ligne dans les méthodes de rendu

Il est recommandé d'éviter les fonctions de flèche en ligne telles que this._handleChange.bind(this) dans la méthode de rendu d'un composant React.

Raison :

Lors du nouveau rendu, React créera de nouvelles méthodes au lieu de réutiliser les anciennes. Cela peut nuire aux performances en provoquant une création de fonctions et une allocation de mémoire inutiles.

Alternatives :

Il existe plusieurs façons de contourner les fonctions de flèche de liaison dans la méthode de rendu :

1. Liaison du constructeur :

• Lier la méthode dans le constructeur : this._handleChange = this._handleChange.bind(this);

• Exemple :

  class MyClass extends React.Component {
     constructor(props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
     }
  
     _handleChange() {
        // ...
     }
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

2. Syntaxe de l'initialiseur de propriété :

• Définissez la méthode à l'aide de la syntaxe de l'initialiseur de propriété : _handleChange = () => { ... };

• Exemple :

  class MyClass extends React.Component {
     _handleChange = () => {
        // ...
     };
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

3. Gestion des événements avec les fonctions de rappel :

• Créez une fonction de rappel distincte qui reçoit les arguments nécessaires :

• Exemple :

  class MyClass extends React.Component {
     handleDeleteTodo = (todo) => {
        // ...
     };
  
     render() {
        return todos.map((todo) => (
           <div key={todo}>
              <input onChange={this.handleDeleteTodo.bind(this, todo)}>
              {todo}
           </div>
        ));
     }
  }

4. Fonctions de flèche à l'échelle du composant :

• Déclarez la fonction de flèche en dehors de la méthode de rendu mais dans la portée de la classe de composant :

• Exemple :

  class MyClass extends React.Component {
      _handleDeleteTodo = (todo) => {
         // ...
      };
  
      render() {
         return todos.map((todo) => (
            <div key={todo} onClick={this._handleDeleteTodo.bind(this, todo)}>
               {todo}
            </div>
         ));
      }
  }

5. Gestionnaires d'événements externes :

• Déplacez la logique de gestion des événements vers un composant externe ou une fonction d'assistance pour éviter toute liaison au sein de la méthode de rendu :

• Exemple :

  const handleDeleteTodo = (todo) => {
     // ...
  };
  
  class MyClass extends React.Component {
     render() {
        return todos.map((todo) => (
           <MyComponent todo={todo} onDelete={handleDeleteTodo} />
        ));
     }
  }
  
  class MyComponent extends React.Component {
     render() {
        return <div onClick={this.props.onDelete.bind(this, this.props.todo)}>{this.props.todo}</div>;
     }
  }

Ces alternatives offrent des méthodes efficaces pour gérer les événements au sein des composants React sans sacrifier les performances ni introduire de fonctions inutiles. contraignant.

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!