Fonction de liaison de réaction

Si vous utilisez First:

onClick={() => this.clearDisplay()}

Il ne s'exécutera que lorsque onChange sera appelé. Si vous voulez lier cette fonction, vous devez la déclarer dans le constructeur de la classe de composant comme ceci:

constructor(props) {
    super(props);
    this.state = {
      // your state
    };
    this.clearDisplay = this.clearDisplay.bind(this);
}

La deuxième:

onChange = {this.fileSelected}

onChange={this.fileSelected}

Est préférable car il est capable de ne pas provoquer de ré-rendus inutiles.

onClick = {() => this.clearDisplay ()}

Lorsque vous passez une fonction anonyme comme celle-ci, elle sera en fait appelée sur toutes les instances de la classe au lieu de celle sur laquelle l'événement a été déclenché.

D'un niveau élevé, il peut sembler qu'ils aient le même comportement, mais si vous utilisiez la deuxième méthode de manière cohérente sur une base de code importante, les performances de votre application en souffriraient.

Cet article approfondit la question:

https: / /medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

onChange = {this.fileSelected}

Cela dirigera la fonction de liaison fileSelected vers la méthode onChange . Ainsi, lorsque la méthode onChange sera appelée, elle appellera la fonction fileSelected .

tandis que

onClick = {() => this.clearDisplay ()}

Cela appellera la fonction onClick dans laquelle vous appelez la fonction clearDisplay . Ainsi, lorsque vous avez appelé la méthode onClick, d'abord anonyme appelée dans laquelle la fonction clearDisplay est appelée. Donc, fondamentalement, dans cette méthode, deux fonctions sont appelées. dans cette methos, vous pouvez faire des appels supplémentaires ou d'autres choses

par exemple

onClick={() => {
  console.log("this function called")
  this.clearDisplay();
}