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( )<🎜 sera trouvée ici. >, 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

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();
  }

, 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

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

4. Si this

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

🎜> 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

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

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();

import {handleClick} = toggleButton;

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

. 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!