Sharing several methods of React event binding

This article mainly introduces to you the comparison of several methods of event binding in React learning. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. I hope it can help everyone gain a deeper grasp. React event binding method.

React event binding

Since the class method does not bind this by default, if you forget to bind it when calling, the value of this will be undefined.

Usually if it is not called directly, this should be bound to the method. There are several binding methods:

1. Use bind to bind this

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

in the constructor. 2. Use bind to bind this
# when calling. ##

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

3. Use arrow function to bind this when calling

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

4. Use property initializer syntax to bind this(experimental)

class Button extends React.Component {
 handleClick=()=>{
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

Comparison

Both methods 2 and 3 bind this when calling.

• Advantages: The writing method is relatively simple. When there is no state in the component, there is no need to add a class constructor to bind this

• Disadvantages: A new method instance will be generated every time it is called, so it has an impact on performance, and when this function is passed into low-level components as a property value, these components may undergo additional re-rendering, because each time it is new The method instance is passed as a new property.

Method 1 Bind this in the class constructor, no need to bind again when calling

• Advantages: Only one method will be generated Instance, and after binding once, if this method is used multiple times, there is no need to bind again.

• Disadvantages: Even if state is not used, you still need to add a class constructor to bind this, which requires a little more code. . .

Method 4: Use attribute initialization syntax to initialize the method as an arrow function, so this is bound when the function is created.

• #Advantages: Bind this when creating a method, no need to bind in the class constructor, and no need to bind again when calling. Combining the advantages of method 1, method 2, and method 3

• Disadvantages: It is still an experimental syntax and needs to be translated with babel

Related Recommended:

Basic explanation of jQuery event binding function

Detailed explanation of the basic event binding function of jQuery

Detailed explanation of function binding and class event binding function implemented by javascript in ES6

The above is the detailed content of Sharing several methods of React event binding. For more information, please follow other related articles on the PHP Chinese website!