Analysis of the reasons for binding this in React components

This article will share with you about why this should be bound in the React component method. The content is very good. Friends in need can refer to it. I hope it can help everyone.

If you have tried to use React for front-end development, you must have seen the following code:

//假想定义一个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>
        )
    }
}

Why should all instance methods be given in the constructor? What about binding this?

1. Details of code execution

The above example is just the definition of a component class. When called or used in other componentsReactDOM.render()The method will generate an instance of the component when rendering it to the interface, because the component can be reused, and object-oriented programming is very suitable for its positioning. According to the basic rules pointed by this, we can know that this here will eventually point to the instance of the component.

When the component instance is generated, the constructor constructor will be executed. Here we focus on analyzing the following line of code:

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

At this timethis points to the newly generated instance, then the expression on the right side of the assignment statement first searches for the this.handleClick( ) method. This can be seen from the object's property search mechanism (searching from near to far along the prototype chain) You will find the prototype method this.handleClick( ), and then execute bind(this), where this points to the newly generated instance, so after the expression on the right side of the assignment statement is calculated, a new method specifying this will be generated, and then the assignment operation will be performed to assign the newly generated function to the handleClick# of the instance. ##Attribute, as can be seen from the assignment mechanism of the object, the handleClick here will be directly generated as an instance attribute. To summarize, the above statement does one thing:

changes the prototype method handleClick( ) to the instance method handleClick( ), and Force this in this method to point to the current instance.

2. Why not use bind(this) in the ES5 writing method?

The ES5 writing method refers to using the

React.createClass( ) method to define components. ReactThis API has been removed in new versions above V16. You can see the details of this method by reading the source code of earlier versions.

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

In the old version of

React, you can see the above code in the definition of createClass(). Putting aside other complex logic, just start from the method name. It can be seen that this is an automatic binding method. In fact, what is done in this method is to force binding this of the custom method in the component. Interested readers can check the source code by themselves. Learn the details.

3. The necessity of binding this

Binding an event listener on a component is to respond to the user's interaction. When a specific interaction triggers an event, the listening function often contains It is necessary to manipulate the value of a certain state of the component to provide response feedback to the user's click behavior. For developers, when this function is triggered, they need to be able to obtain the state collection exclusive to this component (such as the switch component above

ToggleButtonIn the example, the value of its internal state property state.isToggleOn marks that the button should display ON or OFF), so The this of the mandatory binding listener function here points to the current instance is also easy to understand.

The bind in the React constructor will bind the response function to the component Component to ensure that when using this in this handler function, it can always point to the instance of this component.

4. If this is not bound

If the pointer to

this is not bound in the class definition, this will be triggered when the user clicks. handleClick()This method actually executes the prototype method, but this does not seem to have any impact. If the state is initialized in the constructor of the current component attribute, then when the prototype method is executed, this.state will directly obtain the state attribute of the instance. If the state attribute is not initialized in the construction (such as in React UI component), indicating that the component has no state of its own. At this time, even calling the prototype method seems to have no effect.

In fact, this is indeed the case. What bind(this) here hopes to avoid in advance is the famous problem of missing this pointer.

For example, when using

destructuring assignment to obtain a certain attribute method, it will cause the problem of losing this in reference conversion:

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

In the above example, the destructuring assignment obtained

handleClickThis method will report an error when executed. The inside of Class is forced to run in strict mode. The original this here is lost in the assignment. Some point to undefined at runtime, and undefined has no attributes.

Another limitation is that the response function that is not bound to

this may cause problems when running asynchronously. When it is passed into an asynchronous execution method as a callback function, An error will also be caused because the pointer to this is lost.

If there is no mandatory specification of this for the component instance method, you will not be able to use reference conversion or as a callback function in future use This method is inconvenient for subsequent use and collaborative development.

5. Summary

this is very flexible to use, but this flexibility also brings a lot of confusion. The bind(this) here is to improve the language-level defects of javascript. This is not only required in React. This problem arises with object-oriented programming. When using javascriptWhen developing plug-ins and frameworks, the impact of this problem will be more obvious. The reason why it is said to be a language-level flaw is because Java’s pointing to this in the same scenario is more in line with normal thinking logic, while javascript’s If the binding is not displayed, the language execution result will be inconsistent with the naming meaning of the method.

Related recommendations:

Analysis of the reasons why animation does not take effect in React

Usage of React: React components Internal state management

The above is the detailed content of Analysis of the reasons for binding this in React components. For more information, please follow other related articles on the PHP Chinese website!