Pourquoi devriez-vous éviter d'utiliser les fonctions de liaison et de flèche en ligne dans la méthode de rendu de React ?

Fonctions de liaison et de flèche en ligne dans la méthode de rendu : conséquences et alternatives

Introduction :

Dans React, les performances de rendu peuvent être affectées si des fonctions de liaison de méthode ou de flèches en ligne sont utilisées dans la méthode de rendu. En effet, cela peut déclencher la création de nouvelles méthodes au lieu de réutiliser celles existantes, ce qui entraîne une perte potentielle de performances.

Éviter les liaisons dans les méthodes de rendu :

Pour éviter les liaisons problèmes dans la méthode de rendu, il existe quelques approches :

• Liaison dans le constructeur : Les méthodes peuvent être liées dans le constructeur en utilisant this.methodName = this.methodName.bind( this);.
• Syntaxe de l'initialiseur de propriété : Les propriétés peuvent être initialisées sous forme de fonctions fléchées directement dans la classe, comme dans : methodName = () => {...}.

Adressage des paramètres transmis dans les liaisons :

Lorsqu'il s'agit de transmettre des paramètres supplémentaires dans les liaisons, il existe des approches alternatives pour éviter les paramètres en ligne. fonctions de flèche dans la méthode de rendu :

• Création d'un composant personnalisé : La logique spécifique au composant peut être encapsulée dans un composant enfant distinct, en passant les accessoires nécessaires et en gérant l'événement onClick à l'intérieur .
• Utilisation des fonctions fléchées dans la portée externe : Les fonctions fléchées peuvent être définies en dehors de la méthode de rendu, en passant les paramètres supplémentaires comme arguments à ces fonctions.

Exemple de code :

Voici un exemple de mise en œuvre des approches alternatives mentionnées ci-dessus :

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  // Binding in constructor
  handleClick() {
    console.log("Constructor binding");
  }

  // Property initializer syntax
  deleteTodo = () => {
    console.log("Property initializer binding");
  };

  handleClickWithArgs = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  render() {
    // Arrow function in constructor (no extra parameters)
    return (
      <div onClick={this.handleClick}>
        {" "}
        Click Me Constructor Binding{" "}
      </div>
    );
  }
}

function App() {
  const todos = ["a", "b", "c"];

  // Using arrow functions in the outer scope
  const handleDeleteTodo = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  return (
    <div>
      {todos.map((el) => (
        <MyComponent key={el} onClick={handleDeleteTodo} />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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!