Analysis of the reasons for binding this in React components-JS Tutorial-php.cn

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

Copy after login

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 rulespointed bythis, we can know thatthishere will eventually point to the instance of the component.

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

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

Copy after login

At this timethispoints to the newly generated instance, then the expression on the right side of the assignment statement first searches for thethis.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 theprototype methodthis.handleClick( ), and then executebind(this), wherethispoints to the newly generated instance, so after the expression on the right side of the assignment statement is calculated, a new method specifyingthiswill be generated, and then the assignment operation will be performed to assign the newly generated function to thehandleClick# of the instance. ##Attribute, as can be seen from the assignment mechanism of the object, thehandleClickhere will be directly generated as an instance attribute. To summarize, the above statement does one thing:

changes the prototype methodhandleClick( )to the instance methodhandleClick( ), and Forcethisin 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(); }

Copy after login

In the old version of

React, you can see the above code in the definition ofcreateClass(). 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 bindingthisof 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 propertystate.isToggleOnmarks that the button should displayONorOFF), so Thethisof 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

thisis not bound in the class definition,this will be triggered when the user clicks. handleClick()This method actually executes theprototype method, but this does not seem to have any impact. If thestateis initialized in the constructor of the current component attribute, then when the prototype method is executed,this.statewill directly obtain thestateattribute of the instance. If thestateattribute 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. Whatbind(this)here hopes to avoid in advance is the famous problem of missing this pointer.

For example, when using

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

const toggleButton = new ToggleButton(); import {handleClick} = toggleButton;

Copy after login

In the above example, the destructuring assignment obtained

handleClickThis method will report an error when executed. The inside of Class is forced to run instrict mode. The originalthishere is lost in the assignment. Some point toundefinedat runtime, andundefinedhas no attributes.

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

thismay 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 tothisis lost.

If there is no mandatory specification ofthisfor the component instance method, you will not be able to usereference conversionoras a callback function in future useThis method is inconvenient for subsequent use and collaborative development.

5. Summary

thisis very flexible to use, but this flexibility also brings a lot of confusion. Thebind(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 usingjavascriptWhen 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 becauseJava’s pointing tothisin the same scenario is more in line with normal thinking logic, whilejavascript’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!