Deeply Understand how es6 creates this component in React, reactes6

Deeply Understand how es6 creates this component in React, reactes6

Started at: https://mingjiezhang.github.io /.

In JavaScript, this object is bound to a function-based execution environment (that is, context) during runtime.

Starting with the demo in react

In the last react update, Facebook added the class in es6 to the component creation method. Facebook also recommends that you define a Component class by defining a class inherited from React. Component. 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}>You {text} this. Click to toggle.</div>);}}ReactDOM.render(<LikeButton />,document.getElementById('example'));

The above demo has a lot of this usage, in class LikeButton extends React. in Component, we declare this class. Because this is determined by its context, we cannot know the usage of this in class definition. Equivalent to the new class defined above, first call the constructor () function, this. the context of this state is the instance object. Similarly, in the render () function, this. state. this context of liked is also the object. The problem is that onClick = {this. handleClick}. It is no problem to obtain this function reference. Here, this context is the object.

In the original React. createClass, handleClick () is automatically bound to the LikeButton instance when the onClick event is triggered. In this case, the context of this function is the instance. However, in the ES6 class writing method, Facebook canceled Automatic Binding. After the LikeButton is instantiated, the context of handleClick () is the backing instance of div, while handleClick () the original context is the LikeButton instance. We have a variety of solutions for this problem.

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

You can use

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

This method is bound to a bind () and used multiple times. In this method, after declaring the instance, you can use the handleClick () function anywhere in the instance, and the context of this of the handleClick () function is a LikeButton instance object.

In addition, we can bind the context of this to the LikeButton instance object where the function is used. The Code is as follows:

<div onClick={this.handleClick.bind(this)}>You {text} this. Click to toggle.</div>

This method requires us to bind the bind () function to the component object each time.

Es6 arrow Function

In es6, arrow functions => are added. In addition to convenience, arrow functions also include binding this function to the context of its definition. This feature can also help us solve this problem. Use the following code:

<div onClick={() => this.handleClick()}>You {text} this. Click to toggle.</div>

In this way, the context of this. handleClick () will be bound to the LikeButton instance object. I personally think that using arrow functions makes JavaScript closer to the object-oriented programming style.

Summary of this

The essence of this is: this has nothing to do with the scope, and is only related to the execution context.

The above section describes how to create the es6 component this in React. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!