Publié pour la première fois sur: https://mingjiezhang.github.io/.
Dans JavaScript, cet objet est lié à l'environnement d'exécution basé sur les fonctions d'exécution (c'est-à-dire le contexte).
Commencez par démo dans réagir
Lorsque Facebook a récemment mis à jour React, la classe dans ES6 a été ajoutée à la méthode de création de composants. Facebook recommande également que l'utilisation de la création de composants définisse une classe de composants en définissant une classe héritée de React. Démo officiel:
CLASSE LIMBUTTON étend React.Component {Constructor () {super (); this.state = {aimé: false}; this.handleclick = this.handleclick.bind (this);} handleclick () {this.setState ({aimed :! this.state.Liked});} Render () {const texte = this.stated? 'aime': 'haven /' t loved '; return (<div onclick = {this.handleclick}> vous {text} this. Cliquez pour togner. </div>);}} reactdom.render (<likebutton />,Document.getElementyid('Example'));Il y a beaucoup de cette utilisation dans la démo ci-dessus. Dans la classe, Amebutton étend React. Il est équivalent à la nouvelle classe définie ci-dessus, appelant d'abord la fonction constructeur (), ce contexte de ce.state est l'objet d'instance; De même, ce contexte de ce.state.Liked dans la fonction render () est également l'objet. Le problème est que onClick = {this.handleclick}, il n'y a aucun problème à obtenir la référence à cette fonction, et le contexte ici est l'objet.
À l'heure actuelle, le problème est que dans React.CreateClass, HandleClick () se liera automatiquement à l'instance de Button lorsque l'événement OnClick est déclenché. À l'heure actuelle, le contexte de cette fonction est l'instance. Cependant, dans l'écriture de la classe ES6, Facebook a annulé la liaison automatique. Après instanciation de Button, le contexte de handleclick () est l'instance de support de la div (instance de support), et le contexte de handleclick () est à l'origine forcé d'être une instance de Button. Nous avons plusieurs solutions à ce problème.
Utilisez la fonction bind () pour modifier le contexte de ce
Vous pouvez utiliser la fonction constructeur () dans la déclaration de classe
this.handleclick = this.handleclick.bind (this);
Cette méthode est une liaison bind () et utilisée plusieurs fois. Dans cette méthode, après avoir déclaré l'instance, nous pouvons utiliser la fonction handleclick () n'importe où dans l'instance, et le contexte de cette fonction handleclick () est un objet d'instance de Button.
De plus, nous pouvons également lier ce contexte à l'objet d'instance de Button dans lequel la fonction est utilisée. Le code est le suivant
<div onClick = {this.handleclick.bind (this)}> vous {text} ceci. Cliquez pour basculer. </div>Cette méthode nous oblige à nous lier à l'objet composant à chaque fois en utilisant la fonction bind ().
Fonction de flèche d'Es6
Une fonction flèche => a été ajoutée à ES6. En plus de la commodité, une fonction Arrow a une autre caractéristique qui consiste à lier cette fonction au contexte dans lequel il est défini. Cette fonctionnalité peut également nous aider à résoudre ce problème. Utilisez le code suivant:
<div onClick = {() => this.handleclick ()}> vous {text} ceci. Cliquez pour basculer. </div>De cette façon, le contexte de ce.handleclick () sera lié à l'objet d'instance de Button. Personnellement, je crois que l'utilisation des fonctions Arrow rend JavaScript plus proche du style de programmation orienté objet.
Ce résumé
L'essence est: cela n'a rien à voir avec la portée, mais uniquement avec le contexte d'exécution.
Ce qui précède est la méthode de création de ce composant dans ES6 dans React que l'éditeur vous a présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!