6 façons de lier ce mot clé JavaScript dans React, ES6 & ES7

Points clés

• Le mot-clé de JavaScript this peut être déroutant, en particulier dans les fonctions de rappel. Dans React, this fait référence au contexte du composant, qui peut causer des problèmes lorsque les contextes de fonction changent (par exemple, promesse des rappels).
• Plusieurs méthodes existent pour gérer this liaison: création d'une référence de niveau supérieur this (alias this), injectant le contexte correct au moment de l'exécution (lier ceci), en tirant parti des méthodes de composants React, en utilisant les fonctions de flèche ES2015, en utilisant ES2016 Bind Syntax (si pris en charge), ou en utilisant des méthodes qui acceptent un argument explicite this.
• La méthode optimale dépend de facteurs tels que les performances, la facilité de débogage et les préférences personnelles. Aliasing this priorise les performances; Les méthodes de composants ou les fonctions nommées améliorent le débogage; Les fonctions de flèche sont concises pour les fonctions en ligne courtes.

Le mot-clé de JavaScript this déclenche fréquemment les développeurs. Contrairement aux langues avec des modèles de classe stricts, son comportement n'est pas toujours prévisible, en particulier dans les fonctions de rappel où le site d'appel est hors de votre contrôle. Le code externe peut facilement relire le contexte de la fonction en utilisant new ou des méthodes sur Function.prototype. Cela conduit à un comportement imprévisible, ce qui entraîne souvent des appels excessifs .bind(this) tout au long du code de rappel. Le problème

L'utilisation de React de this pour référencer le contexte des composants hérite de cette ambiguïté. Considérez ce modèle de réact commun:

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

Cela donne un TypeError car this.setState n'est pas une fonction. Le rappel Promise modifie le contexte interne de la fonction, faisant référence à this le mauvais objet. Explorons les solutions. Les solutions

Ces solutions vont des techniques JavaScript établies aux méthodes spécifiques à réagir et aux fonctionnalités plus récentes (potentiellement non soutenues).

1. Alias ​​ce

Une approche de longue date consiste à créer une deuxième référence this au niveau supérieur du composant:

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

Simple et facilement compris, cela offre une garantie visuelle claire du contexte correct. Bien que apparemment contre-intuitif, il est efficace et simple.

2. Lier ce

Cette méthode injecte le contexte correct dans le rappel lors de l'exécution:

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

Chaque fonction JavaScript a une méthode bind pour spécifier this. Une fois lié, le contexte ne peut pas être remplacé, s'assurer que this se réfère à l'objet correct. Cependant, cette approche est moins lisible et devient lourde dans un code asynchrone profondément imbriqué, nécessitant une liaison manuelle pour chaque fonction.

3. Méthodes de composants réagi

Les composants

réagis permettent de définir des méthodes qui sont automatiquement liées avec le contexte this correct lors de l'utilisation de React.createClass. Cela permet de déplacer la logique de rappel dans le composant:

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

Élégant pour les composants simples, cela favorise le code plus propre et élimine les préoccupations contextuelles. Notez que cette auto-liaison ne s'applique pas aux classes ES2015; Des méthodes alternatives y sont nécessaires. React vous avertira si vous êtes inutilement .bind(this) à une méthode de composante.

4. Fonctions de flèche ES2015

ES2015 Les fonctions de flèche (=>) sont concises et héritent this de leur portée enfermée:

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

this reste correct quel que soit le niveau de nidification. L'inconvénient est la perte de dénomination de la fonction, entrave le débogage (les traces de pile montrent "(fonction anonyme)"). La compilation Babel utilise souvent l'alias de cette approche pour maintenir le contexte.

5. ES2016 Bind Syntaxe (proposition)

Une syntaxe de liaison ES2016 (ES7) proposée utilise :: pour lier une fonction à une valeur donnée this. Par exemple:

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

Bien que intéressant, cette syntaxe n'est pas largement prise en charge et souffre d'inconvénients similaires à .bind(this), se compilant souvent au même résultat.

6. Approches spécifiques à la méthode

Certaines fonctions permettent de passer un argument explicite this (par exemple, l'argument final de map):

React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });
    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});

Ceci est incohérent; La plupart des fonctions manquent de cette fonctionnalité.

Conclusion

Plusieurs approches existent pour gérer le contexte this. Priorisez les performances avec l'alias, débogage de facilité avec les méthodes de composants ou les fonctions nommées, et la concision avec les fonctions flèches pour un code en ligne court. Le meilleur choix dépend de vos priorités et de votre style de codage. Évitez les solutions trop complexes qui entravent la lisibilité et la maintenabilité.

Questions fréquemment posées (FAQ)

(les FAQ sont omises par la brièveté, car elles sont largement couvertes dans le texte d'origine et augmenteraient considérablement la durée de cette réponse déjà complète. Les FAQ originales offrent une excellente couverture de ce sujet.)

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!