[前端] React.js绑定this的5种方法

This is already quite flexible in javascript, and putting it in React makes our choice even more confusing. Let’s look at five binding methods for React this.

Use React. createClass

If you are using React 15 or below, you may have used the React. createClass function to create a component. The this of all the functions you create in it will be automatically bound to the component.

ConstApp = React. createClass ({

HandleClick () {

Console. log ('this >', this); // this points to the App component itself

}

Render () {

Return (
    <div onClick={this.handleClick}>test</div>
        );
    }
};

But it’s important to note that with the release of React 16, officials have removed the change from React.

Using bind in render method

If you use React. Component to create a component in which an onClick attribute is given to a component/element, it will now and will bind its this to the current component by using. Bing (this) after the event function to bind this to the current component.

Class App extends React. Component {

HandleClick () {
Console. log ('this >', this);
}

Render () {

    Return (

        <div onClick={this.handleClick.bind(this)}>test</div>

        )

    }
}

This method is very simple, and it may be a way that most novice developers adopt when they encounter problems. Then because the component will reallocate the function each time render is executed, this will affect performance. Especially after you have done some performance optimization, it will destroy PureComponent performance. Not recommended

Use arrow function in render method

This method uses ES6 context binding to make this point to the current component, but it has the same performance problems as the second one and is not recommended.

Class App extends React. Component {

HandleClick () {
    Console. log ('this >', this);
}

Render () {

    Return (
            <div onClick={e=> this.handleClick(e)}> test</div>
        )
    }
}

The following methods can avoid these troubles without too much extra trouble.

bind in constructor

To avoid possible performance problems caused by binding this in render, we can pre-bind it in the constructor.

Class App extends React. Component {

Constructor (props) {
    Super (props);
    This. handleClick = this. handleClick. bind (this);
}



HandleClick () {
    Console. log ('this >', this);
}



Render () {
        Return (
        <div onClick={this.handleClick}>test</div>
        )
    }
}

This method obviously has no advantage in readability and maintainability of the second and the third, but the second and the third are not recommended because of potential performance problems, so now we recommend the arrow function binding provided by ECMA stage-2.

Use arrow function binding in the definition phase

To use this function, we need to turn on stage-2 function in. babelrc. The binding method is as follows:

Class App extends React. Component {

Constructor (props) {
Super (props);
}

HandleClick =() => {
Console. log ('this >', this);
}

Render () {

Return (
            <div onClick={this.handleClick}>test</div>
        )
    }
}

This method has many optimizations:
The arrow function is automatically bound to the scope of the current component and will not be changed by call.
It avoids potential performance problems in the second and third categories.
It avoids a lot of duplicate code in the fourth binding

Conclusion:If you use versions of ES6 and React 16 or more, the best practice is to use the fifth method to bind this