Partage de plusieurs méthodes de liaison d'événements React

Cet article vous présente principalement la comparaison de plusieurs méthodes de liaison d'événements dans l'apprentissage React. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. avoir une compréhension plus approfondie de la méthode de liaison d'événement React.

Liaison d'événement React

Étant donné que les méthodes de classe ne lient pas ceci par défaut, si vous oubliez de le lier lors de l'appel, la valeur de this ne sera pas définie.

Habituellement, s'il n'est pas appelé directement, cela doit être lié à la méthode. Il existe plusieurs méthodes de liaison :

1. Utilisez bind pour lier ceci dans le constructeur

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

2. Utilisez bind pour lier ceci
<.>

3. Utilisez la fonction flèche pour lier ceci lors de l'appel

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

4. Utilisez la syntaxe d'initialisation de propriété pour lier ceci (expérimental)

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

Comparaison

class Button extends React.Component {
 handleClick=()=>{
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

Les deux méthodes 2 et 3 lient ceci lors de l'appel.

Avantages : La méthode d'écriture est relativement simple Lorsqu'il n'y a pas d'état dans le composant, il n'est pas nécessaire d'ajouter un constructeur de classe pour lier cela

• Inconvénients : une nouvelle instance de méthode sera générée à chaque appel, elle a donc un impact sur les performances, et lorsque cette fonction est transmise aux composants de bas niveau en tant que valeur de propriété, ces composants peuvent subir des modifications supplémentaires. rendu, car à chaque fois c'est nouveau L'instance de méthode est passée en tant que nouvelle propriété.

• Méthode 1 : liez ceci dans le constructeur de classe, et il n'est pas nécessaire de le lier à nouveau lors de l'appel

Avantage : une seule méthode sera généré Instance, et après la liaison une fois, si cette méthode est utilisée plusieurs fois, il n'est pas nécessaire de se lier à nouveau.

• Inconvénients : Même si l'état n'est pas utilisé, un constructeur de classe doit être ajouté pour le lier, ce qui nécessite un peu plus de code. . .

• Méthode 4 : utilisez la syntaxe d'initialisation d'attribut pour initialiser la méthode en tant que fonction fléchée, afin qu'elle soit liée lors de la création de la fonction.

Avantages : liez-le lors de la création d'une méthode, pas besoin de le lier dans le constructeur de classe et pas besoin de le lier à nouveau lors de l'appel. Combinant les avantages de la méthode 1, de la méthode 2 et de la méthode 3

• Inconvénients : Il s'agit encore d'une syntaxe expérimentale et doit être traduite avec babel

• Connexe recommandé :

Explication de base de la fonction de liaison d'événement de jQuery

Explication détaillée de la façon dont jQuery implémente la fonction de liaison d'événement de base

Explication détaillée de la fonction de liaison de fonction et de liaison d'événement de classe implémentée par JavaScript dans ES6

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!