Maison > interface Web > js tutoriel > le corps du texte

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

Barbara Streisand
Libérer: 2024-11-15 04:34:02
original
140 Les gens l'ont consulté

Why Should You Avoid Inline Arrow Functions in React Render Methods?

É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} />;
       }
    }
    Copier après la connexion

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} />;
       }
    }
    Copier après la connexion

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>
          ));
       }
    }
    Copier après la connexion

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>
           ));
        }
    }
    Copier après la connexion

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>;
       }
    }
    Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal