Analyse des raisons de cette liaison dans les composants React

Cet article vous explique pourquoi cela devrait être lié à la méthode des composants React. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Si vous avez essayé d'utiliser React pour le développement front-end, vous devez avoir vu le code suivant :

//假想定义一个ToggleButton开关组件
class ToggleButton extends React.Component{
    constructor(props){
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this); 
        this.handleChange = this.handleChange.bind(this);
    }
    handleClick(){
        this.setState(prevState => ({
            isToggleOn: !preveState.isToggleOn
        }));
    }
    handleChange(){
        console.log(this.state.isToggleOn);
    }
    render(){
        return(
           <button onClick={this.handleClick} onChange={this.handleChange}>
                {this.state.isToggleOn ? &#39;ON&#39;:&#39;OFF&#39;}
            </button>
        )
    }
}

Pourquoi toutes les méthodes d'instance devraient-elles être liées dans le constructeur ? Et ça ?

1. Détails de l'exécution du code

L'exemple ci-dessus est simplement la définition d'une classe de composant Lorsqu'il est appelé dans d'autres composants ou à l'aide de la méthode ReactDOM.render( ), il est rendu. l'interface. Une instance du composant sera générée car le composant peut être réutilisé et la programmation orientée objet est très adaptée à son positionnement. D'après les règles de base indiquées par this, nous pouvons savoir que le this ici finira par pointer vers l'instance du composant.

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

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

A ce moment, this points. à l'instance nouvellement générée, puis l'expression sur le côté droit de l'instruction d'affectation 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 du prototype), on peut voir que. la méthode prototype this.handleClick( ), puis exécutez , où bind(this) pointe vers l'instance nouvellement générée, donc après que l'expression sur le côté droit de l'instruction d'affectation soit calculée, une nouvelle méthode spécifiant this sera générée, puis l'opération d'affectation sera exécutée. La fonction nouvellement générée est affectée à l'attribut this selon le mécanisme d'affectation de l'objet, le handleClick 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 le handleClick( ) de cette méthode à pointer vers l'exemple actuel. this

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 React.createClass( ) est nouveau dans la V16. et supérieures. Cette API a été supprimée dans cette version, et vous pouvez voir les détails de cette méthode en lisant le code source des versions antérieures. React

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

Dans l'ancienne version de

, vous pouvez voir le code ci-dessus dans la définition de React. 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 automatique. liaison Une certaine méthode, ce qui est réellement fait dans cette méthode est la liaison forcée de createClass() à la méthode personnalisée dans le composant. Les lecteurs intéressés peuvent vérifier le code source pour plus de détails. this

3. La nécessité de lier ce

La liaison d'un écouteur d'événement sur un composant est de répondre à l'interaction de l'utilisateur Lorsqu'une interaction spécifique déclenche un événement, la fonction d'écoute le contient souvent. pour manipuler la valeur d'un certain état du composant afin de 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'états exclusive à ce composant (par exemple, dans le composant switch ci-dessus 🎜>Dans l'exemple, la valeur de son attribut d'état interne

marque que le bouton doit afficher ToggleButtonONstate.isToggleOn ou OFF), donc la fonction d'écoute est forcée d'être lié ici Pointer vers l'instance actuelle est également facile à comprendre. this

La liaison dans le constructeur React liera la fonction de réponse au composant Component pour garantir que lors de son utilisation dans cette fonction de gestionnaire, elle peut toujours pointer vers l'instance de ce composant.

4. Si this

n'est pas lié dans la définition de la classe, si le pointeur de

n'est pas lié dans la définition de la classe, lorsque l'action de clic de l'utilisateur déclenche le

🎜> méthode, en fait Ce qui est exécuté est la this méthode prototype this.handleClick( ), mais cela ne semble pas avoir d'impact Si l'attribut est initialisé dans le constructeur du composant actuel, alors lorsque la méthode prototype. est exécuté, obtiendra directement l'attribut instance. state, si l'attribut this.state n'est pas initialisé dans la construction (comme le composant UI dans React), cela signifie que le composant n'a pas d'état propre . Pour le moment, même l’appel de la méthode prototype semble n’avoir aucun effet. statestate

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

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 :

Dans ce qui précède Par exemple, une affectation de déstructuration est obtenue. La méthode

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

signalera une erreur lors de son exécution. L'intérieur de Class est forcé de s'exécuter en

mode stricthandleClick Le perd ici son pointeur d'origine dans l'affectation. Lors de l'exécution Lorsqu'il pointe vers et this n'a aucun attribut. undefinedundefined Une autre limitation est que la fonction de réponse sans liaison

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 à cause du

. le pointeur provoque une erreur. this

S'il n'y a pas de this qui force la spécification de la méthode d'instance du composant, vous ne pourrez pas utiliser en toute sécurité la conversion de référence ou comme fonction de rappel pour transmettre lors d'une utilisation future. Il n'est pas pratique pour une utilisation ultérieure et un développement collaboratif.

5. Résumé

this est très flexible à utiliser, mais cette flexibilité apporte également beaucoup de confusion. Le bind(this) ici vise à 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 lors de l'utilisation de javascript pour les plug-ins. L'impact de ce problème sera plus évident lors du développement de cadres. La raison pour laquelle on dit qu'il s'agit d'un défaut au niveau du langage est que la direction de Java dans this est plus cohérente avec la logique de pensée normale dans le même scénario, et si la liaison n'est pas affichée dans javascript, le langage les résultats de l’opération apparaîtront. Le nom de la méthode ne correspond pas à sa signification.

Recommandations associées :

Analyse des raisons pour lesquelles l'animation ne prend pas effet dans React

Utilisation de React : Composants React Gestion de l'état interne

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!