A deep understanding of how ES6 create components this in react _javascript tips

Starting in: https://mingjiezhang.github.io/.

In JavaScript, the This object is bound by the runtime based on the execution environment (that is, the context) of the function.

From the demo in react

When Facebook last updated react, the class in Es6 was added to the creation of the component. Facebook also recommends that component creation use define a component class by defining a class that inherits from React.component. The Official Demo:

Class Likebutton extends React.component {
constructor () {
super ();
This.state = {
liked:false
};
This.handleclick = This.handleClick.bind (this);
}
Handleclick () {
this.setstate ({liked:!this.state.liked});
}
Render () {
const text = this.state.liked? ' Liked ': ' haven\ ' t liked ';
Return (
<div onclick={this.handleclick}> your
{text} this.) Click to toggle.
</div>
);
}
Reactdom.render (
<likebutton/>,
document.getElementById (' example ')
);

There's a lot of this in the demo above, and we're declaring that class in class Likebutton extends React.component, because this is specifically the context, so we don't know this usage in the class definition. The equivalent of the new class defined above, the first call to the constructor () function, This.state's This context is the instance object; Similarly, the this.state.liked in the render () function is the same object. The problem is Onclick={this.handleclick}, there is no problem getting the function reference, the this context here is the object.

The problem comes when, in the original React.createclass, Handleclick () is automatically bound to the Likebutton instance when the onclick event is triggered, when the context of this function is the instance. However, in the ES6 class, Facebook cancels the automatic binding, and after instantiating Likebutton, the context of Handleclick () is the support instance of the DIV (backing instance), and Handleclick () The context that was originally to be bound is an instance of Likebutton. We have a variety of solutions for this problem.

Use the bind () function to change the context of this

In the constructor () function in the class declaration, you can use the

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

The method is a bind () binding that is used more than once. In this method, after we declare the instance, we can use the Handleclick () function anywhere in the instance, and the context of this handleclick () function is a Likebutton instance object.

In addition, we can bind this context to the Likebutton instance object where the function is specifically used, as follows

<div Onclick={this.handleclick.bind (This)}> your
{text} this. Click to toggle.
</div>

This method requires that we bind to the Component object each time using the bind () function.

Es6 's Arrow function

A new arrow function => is added to the ES6, and the arrow function is not only convenient but also a feature that binds the this function to the context in which it is defined. This feature can also help us solve this problem. Use the following code:

<div onclick={() => This.handleclick ()}> you
{text}. Click to toggle.
</div>

The context of the This.handleclick () is then bound to the Likebutton instance object. Personally, using the arrow functions makes JavaScript closer to object-oriented programming style.

Summary of this

The essence of this is that this has nothing to do with the scope, but only with the execution context.

The above is a small set to introduce the react ES6 to create components This method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!