Comment éviter les problèmes de performances lors de la liaison ou de l'intégration de fonctions de flèche dans la méthode de rendu de React ?

Comment éviter les fonctions de liaison ou de flèche en ligne dans la méthode de rendu

Dans les composants React, il est crucial d'éviter de lier ou d'insérer des fonctions de flèche dans la méthode de rendu pour optimiser les performances . Lors du nouveau rendu, de nouvelles méthodes sont créées au lieu de réutiliser les anciennes, ce qui entraîne des problèmes de performances.

Considérons l'exemple suivant :

<input onChange={this._handleChange.bind(this)} />

Pour résoudre ce problème, nous pouvons lier le _handleChange méthode dans le constructeur :

constructor(props) {
  super(props);
  this._handleChange = this._handleChange.bind(this);
}

Ou, alternativement, nous pouvons utiliser la syntaxe d'initialisation de propriété :

_handleChange = () => {};

Cependant, des défis surviennent lorsque nous devons transmettre des paramètres supplémentaires au gestionnaire onClick . Par exemple, dans une application Todo, nous pourrions avoir besoin de supprimer un élément d'un tableau en fonction de son index ou de son nom.

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}>{el}</div>)

Cette approche crée un nouveau rappel avec le rendu de chaque composant, comme mentionné dans la documentation. .

Alternatives à la liaison à l'intérieur de la méthode de rendu

1. Créer un composant enfant :

Déplacez le contenu de la fonction map vers un composant enfant distinct et transmettez les valeurs comme accessoires. De cette façon, la fonction peut être appelée à partir du composant enfant et transmettre la valeur à la fonction transmise en tant qu'accessoires.

Parent :

deleteTodo = (val) => {
  console.log(val);
};

todos.map((el) => <MyComponent val={el} onClick={this.deleteTodo} />);

Composant enfant (MyComponent) :

class MyComponent extends React.Component {
  deleteTodo = () => {
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this.deleteTodo}>{this.props.val}</div>;
  }
}

Exemple d'extrait :

class Parent extends React.Component {
  _deleteTodo = (val) => {
    console.log(val);
  };

  render() {
    var todos = ['a', 'b', 'c'];
    return (
      <div>
        {todos.map((el) => (
          <MyComponent key={el} val={el} onClick={this._deleteTodo} />
        ))}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  _deleteTodo = () => {
    console.log('here');
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this._deleteTodo}>{this.props.val}</div>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

En implémentant ces alternatives, nous pouvons éviter de lier ou d'insérer des fonctions de flèche à l'intérieur la méthode de rendu, garantissant les bonnes performances et la réutilisabilité du composant.

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!