Pourquoi React doit-il lier cela

La raison pour laquelle React doit lier ceci : lier les écouteurs d'événements aux composants consiste à répondre aux interactions de l'utilisateur. Lorsqu'une action interactive spécifique déclenche un événement, la fonction d'écoute doit souvent opérer sur un certain état du composant. ., puis fournissez un retour de réponse au comportement de clic de l'utilisateur

L'environnement d'exploitation de ce didacticiel : système Windows 7, version React 17, ordinateur DELL G3.

Recommandé : Tutoriel vidéo React

La raison pour laquelle React doit lier ceci :

1 . Détails d'exécution du code

Lorsqu'il est appelé dans d'autres composants ou en utilisant la méthode ReactDOM.render() pour le restituer à l'interface, une instance du composant sera générée, car le composant peut être réutilisé. la façon dont l'objet est programmé est très adaptée à son positionnement. Selon les règles de base indiquées par this, nous pouvons savoir que this ici finira par pointer vers l'instance du composant.

Lorsque l'instance du composant est générée, le constructeur sera exécuté. Ici, nous nous concentrons sur l'analyse de la ligne de code suivante :

this.handleClick = this.handleClick.bind(this);

À ce stade, cela pointe vers l'instance nouvellement générée, puis l'instruction d'affectation est à droite L'expression sur le côté recherche d'abord la méthode this.handleClick( ) Selon le mécanisme de recherche d'attributs de l'objet (recherche de près en loin le long de la chaîne prototype), on peut voir que la méthode prototype sera trouvé ici, puis this.handleClick( ) est exécuté. Ceci ici pointe vers l'instance nouvellement générée, donc une fois l'expression sur le côté droit de l'instruction d'affectation calculée, une nouvelle méthode avec ceci spécifié sera générée, puis l'opération d'affectation sera effectuée et la fonction nouvellement générée sera affectée à l'attribut handleClick de l'instance, qui est déterminé par le mécanisme d'affectation de l'objet. On peut voir que le bind(this) ici sera directement généré en tant qu'attribut d'instance. . Pour résumer, l'instruction ci-dessus fait une chose : handleClick

change la méthode prototype

en une méthode d'instance handleClick() et force cette méthode à pointer vers l'instance actuelle. handleClick()

2. Pourquoi ne pas utiliser bind(this) dans l'écriture ES5 ?

La méthode d'écriture ES5 fait référence à l'utilisation de la méthode

pour définir les composants V16 ou. ci-dessus Cette API a été supprimée dans la nouvelle version. Vous pouvez voir les détails de cette méthode en lisant le code source des versions antérieures. React.createClass( )

  //旧版本`react`中`createClass`方法片段
  if (this.__reactAutoBindMap) {
        this._bindAutoBindMethods();
  }

Dans l'ancienne version de React, vous pouvez voir le code ci-dessus dans la définition de

En mettant de côté toute autre logique complexe, vous pouvez dire à partir du nom de la méthode qu'il s'agit d'une méthode automatiquement liée. en fait, ce qui est fait dans cette méthode est de forcer cette liaison de la méthode personnalisée dans le composant. Les lecteurs intéressés peuvent lire le code source pour plus de détails. createClass()

3. La nécessité de lier ces

Liaison des écouteurs d'événements sur les composants est de répondre aux interactions de l'utilisateur Lorsqu'une action interactive spécifique déclenche un événement, la fonction d'écoute est souvent utilisée. doit exploiter la valeur d'un certain état du composant, puis fournir un retour de réponse au comportement de clic de l'utilisateur. Pour les développeurs, lorsque cette fonction est déclenchée, ils doivent pouvoir obtenir la collection d'état exclusive de ce composant (par exemple). , Dans l'exemple ci-dessus du composant de commutation ToggleButton, la valeur de son attribut d'état interne

indique que le bouton doit afficher ON ou OFF), il est donc facile de comprendre que le this de la fonction d'écoute de liaison obligatoire pointe vers le instance actuelle. state.isToggleOn

La liaison dans le constructeur React liera la fonction de réponse à ce composant

pour garantir que lors de son utilisation dans cette fonction de gestionnaire, elle peut toujours pointer vers l'instance de ce composant. Component

4. Si cela n'est pas lié

S'il ne sert à rien de le lier dans la définition de la classe, lorsque l'action de clic de l'utilisateur déclenche la méthode

, la méthode prototype réelle est exécutée, mais cela semble n'avoir aucun impact. Si l'attribut state est initialisé dans le constructeur du composant actuel, alors lorsque la méthode prototype est exécutée, this.handleClick() obtiendra directement l'attribut state de l'instance. . S'il n'y a pas d'attribut d'état dans le constructeur, l'initialisation de l'attribut d'état (comme les composants d'interface utilisateur dans React) signifie que le composant n'a pas son propre état pour le moment, même l'appel de la méthode prototype semble n'avoir aucun effet. this.state

En fait, c'est bien le cas. Ce que

espère ici éviter par avance, c'est le fameux problème de manquer ce pointeur. bind(this)

Par exemple, lors de l'utilisation de l'affectation de déstructuration pour obtenir une certaine méthode d'attribut, cela entraînera le problème de la perdre lors de la conversion de référence :

const toggleButton = new ToggleButton();

rrree

Dans l'exemple ci-dessus, la méthode handleClick obtenue par déstructuration l'affectation est exécutée lorsqu'une erreur est signalée. L'intérieur de la classe est forcé de s'exécuter en mode strict. Celui-ci perd ici son pointeur d'origine dans l'affectation et pointe vers undéfini au moment de l'exécution, et undéfini n'a aucun attribut.

Une autre limitation est qu'une fonction de réponse qui n'est pas liée à cela peut causer des problèmes lors d'une exécution asynchrone. Lorsqu'elle est transmise à une méthode d'exécution asynchrone en tant que fonction de rappel, elle sera également perdue en raison de la perte de. ceci. indique une erreur.

Si cela n'est pas obligatoire pour les méthodes d'instance de composant, vous ne pourrez pas utiliser en toute sécurité la conversion de référence ou la transmettre comme fonction de rappel lors d'une utilisation future, ce qui sera peu pratique pour une utilisation ultérieure et un développement collaboratif.

5. Résumé

C'est très flexible à utiliser, mais cette flexibilité apporte également beaucoup de confusion. Le bind(this) ici est d'améliorer les défauts au niveau du langage de JavaScript. Ce problème n'est pas seulement requis dans React. Ce problème se pose avec la programmation orientée objet. Lors de l'utilisation de JavaScript pour développer des plug-ins et des frameworks, ce problème sera. plus évident. La raison pour laquelle il s'agit d'un défaut au niveau du langage est que le fait de le signaler dans le même scénario en Java est plus conforme à la logique de pensée normale. Cependant, si la liaison n'est pas affichée en JavaScript, le résultat de l'opération du langage est. le nom de la méthode sera incohérent.

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo javascript

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!